文档章节

Spring MVC前端与后端5种ajax交互方式

猪刚烈
 猪刚烈
发布于 2014/09/24 13:55
字数 535
阅读 167
收藏 2

        前端ajax与后端Spring MVC控制器有以下五种数据交互方式。(前台使用了dhtmlxGrid,后端使用了fastjson)

         

方式一  通过URL传参

通过URL挂接参数,如/auth/getUser?userid='6'

服务器端方法可编写为:getUser(String userid),也可新增其他参数如HttpSession, HttpServletRequest,HttpServletResponse,Mode,ModelAndView等。

 

方式二  单值传参

前台调用如:

ajaxPost("/base/user/exchangeSort",{"id":rid,"otherid":otherid},function(data,status){

                                       xxxxxx

                        xxxxxx

                             });

 

服务器端为:

public String exchangeSort(String id, String otherid)

 

方式三  对象传参

前台调用如:

  var org={id:id};

    ajaxPost("/base/org/getOrgById", org,function(data,textStatus){

                  xxxx

                  xxxx

     }); 

服务器端为

public Org getOrgById(Org org)

 

 

方式四  对象序列化传参

前台调用如:

var ueser={id:rowId};

var data=ajaxPost("/base/user/findById",{"userObj":JSON.stringify(user)},null);

或者

var ueser={ };//创建对象

user["id"]=id;

user["name"]=$("#name").val();

user["dept"]={};//外键对象

user["dept"]["id"]=$("#deptid").val();

ajaxPost("/base/user/addUser",{"userObj":JSON.stringify(user)},function(data){xxxx;xxxxx;});

 

服务器端为:

      @RequestMapping("/findById")

      @ResponseBody

      public UserInfo findById(String userObj) {

       //使用fastJSON

             UserInfo user = JSON.parseObject(userObj, UserInfo.class);

             user = (UserInfo) userService.findById(UserInfo.class, user.getId());

             return user;

      }

 

方式五  列表传参

前台代码如:

               var objList = new Array();

                            grid.forEachRow(function(rId) {

                                  var index = grid.getRowIndex(rId);

                                  var obj = {};

                                   obj["id"] = rId;

                                   obj["user"] = {};

                                   obj["user"]["id"] = $("#userId").val();

                    //不推荐这样的写法

                                   //obj["kinShip"] = grid.cells(rId, 1).getValue();

                                   //obj["name"] = grid.cells(rId, 2).getValue();

                   obj["kinShip"]=grid.cells(rId,grid. getColIndexById ("columnName")).getValue();

obj["name"]=grid.cells(rId,grid.getColIndexById("name")).getValue();

                                  if(grid.cells(rId, 3).getValue()!=null && grid.cells(rId, 3).getValue()!="") {

                                         var str = grid.cells(rId, 3).getValue().split("-");

                                         var day = parseFloat(str[2]);

                                         var month = parseFloat(str[1])-1;

                                         var year = parseInt(str[0]);

                                         var date=new Date();

                                          date.setFullYear(year, month, day);

                                          obj["birth"] = date;

                                   }else {

                                          obj["birth"] ="";

                                   }

                                   obj["politicalStatus"]  = grid.cells(rId, 4).getValue();

                                   obj["workUnit"] = grid.cells(rId, 5).getValue();

                                  if (grid.cells(rId, 6).isChecked())

                                          obj["isContact"] ="1";

                                  else

                                          obj["isContact"] ="0";

                                   obj["phone"] = grid.cells(rId, 7).getValue();

                                   obj["remark"] = grid.cells(rId, 8).getValue();

                                   obj["sort"] = index;

                                   objList.push(obj);

                            });

                           

                            ajaxPost("/base/user/addUpdateUserHomeList", {

                                  "userHomeList" : JSON.stringify(objList),

                                  "userId" : $("#userId").val()

                            },function(data, status) {

                                   xxxxx

                            });

 

服务器端:

  @RequestMapping("/addUpdateUserHomeList")

       @ResponseBody   

       public String addUpdateUserHomeList(String userHomeList, String userId) {

             List<UserHome> userHomes = JSON

                           .parseArray(userHomeList, UserHome.class);//fastJSON

              if (userHomes != null && userHomes.size() > 0) {

                     try {

                            userService.addUpdateUserHomeList(userHomes, userId);

                     } catch (Exception e) {

                            e.printStackTrace();

                     }

              }

              return "200";

       }

 

 

   附上ajaxPost代码:

function ajaxPost(url,dataParam,callback){
	 var retData=null;
	 $.ajax({ 
		 type: "post",
		 url: url, 
		 data: dataParam,
		 dataType: "json",  
		 success: function (data,status) {
		    // alert(data);
		 	retData=data;
		 	if(callback!=null&&callback!=""&&callback!=undefined)
		 		callback(data,status); 
	 	},
	 	error: function (err,err1,err2) {     
	 		alertMsg.error("调用方法发生异常:"+JSON.stringify(err)+"err1"+ JSON.stringify(err1)+"err2:"+JSON.stringify(err2));
	 	}  
 });  	 
      return retData;
 }


 

本文转载自:http://blog.csdn.net/jrn1012/article/details/39520261

猪刚烈

猪刚烈

粉丝 22
博文 708
码字总数 110
作品 1
海淀
程序员
私信 提问
加载中

评论(1)

z
zw0808
非常好
基于Spring MVC的ECharts动态数据实时展示

基于SpringMVC进行ECharts动态实时数据展示,ECharts的官网示例是前端的js动态随机数据,没有与后端程序进行交互,由于本人之前对Spring MVC和ajax不太了解,所以,走了很多弯路,通过这部分...

Adel
2015/08/12
4.1K
0
试图做前后端分离项目遇到的困难

先分享两个前后端分离的技术文章。 Web应用的组件化开发 http://blog.xufei.gitpress.org/~posts/2013-11-20-Web%E5%BA%94%E7%94%A8%E7%9A%84%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91......

change_solider
2014/07/29
2.9K
7
maven+SpringMVC搭建RESTful后端服务框架

今天来尝试一下搭建基于SpringMVC的RESTful标准的后端服务。 首先,什么是MVC?M-model,模型,指业务数据层,具体一点就是业务逻辑与数据库的交互;V-view,视图,用来展示数据,传统SpringM...

灰色的风
2018/02/18
0
0
前端框架模式的变迁

前言 前端框架的变迁,体系架构的完善,使得我们只知道框架,却不明白它背后的道理。我们应该抱着一颗好奇心,在探索框架模式的变迁过程中,体会前人的一些理解和思考 本篇将讲述的是前端框架...

zimo
2017/09/19
0
0
Ajax和SpringMVC之间JSON交互

Ajax和SpringMVC之间的json数据传输有两种方式: 1.直接传输Json对象 2.将Json序列化 1.直接传输Json对象 前端Ajax 后端使用 后端

努力学习ding
2018/06/03
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

thinkphp5.1学习过程四——trait

<?php /** *trait实现了代码的复用 *并且突破了单继承的限制 *trait是类不是类,不能实例化 */ trait Demo1 { public function hello1() { return __METHOD__; } } trait Demo2 { public fu......

大海yht
31分钟前
6
0
DB2 sequence 操作

操作DB2 下 sequence seqName db2数据库一般seq还是比较大的,但是程序在调用的时候还是不可避免的有一些bug, 下面是对于seq一些简单的操作,也作为工作的一些记录 1、命令行取sequence se...

飞雪无痕
39分钟前
6
0
《吊打面试官》系列-秒杀系统设计

你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图和个人联系方式,欢迎Star和指教 絮叨 之前写了很多Redis相关的知识...

敖丙
45分钟前
12
0
Qt编写气体安全管理系统11-数据打印

一、前言 在各种软件系统中,数据打印也是常用的功能之一,一般来说会对查询的数据结果导出到excel,还会对查询的数据结果直接打印,在Qt中提供了打印机类QPrinter,在printsupport组件中,可...

飞扬青云
51分钟前
5
0
初级阶段

#include <stdio.h> #include <stdlib.h> int main(){ int a; int Sn = 0; int i; int tmp = 0; scanf_s("%d", &a); for (i = 1; i <= 5; i++) { tmp = tmp * 10 + a; Sn += tmp; } printf("......

Lxxxxx256
52分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部