Spring MVC前端与后端5种ajax交互方法【总结】

前端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 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; 

}

以上这篇Spring MVC前端与后端5种ajax交互方法【总结】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • springMVC结合AjaxForm上传文件

    最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用. 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 在spring-servlet.xml进行multipartResolver配置: <bean id="multipartResolver" class="org.springf

  • Springmvc ajax跨域请求处理方法实例详解

    上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha

  • spring mvc 和ajax异步交互完整实例代码

    spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

  • SpringMVC环境下实现的Ajax异步请求JSON格式数据

    一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

  • SpringMVC+Ajax+拼接html字符串实例代码

    为什么写这个呢.因为在现在的网页中.单纯的同步传递数据已经变得非常少了.大多数都是通过Ajax异步来传递数据的.因此在这里用SpringMVC+Ajax做一个简单的小例子,同时辅助以拼接字符串显示.希望能为大家带来帮助. 本次案例的配置仍然是在上一篇SpringMVC的简单增删改查(SSM整合)的基础上再辅助配置Jackson的jar包. 服务器端 @RequestMapping("/ajaxlist") @ResponseBody//(springmvc的Jackson注解,返回js

  • Spring MVC中Ajax实现二级联动的简单实例

    今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody public Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException { String ReturnMessage = ""; //获取所有子类故障类型 List<F

  • springmvc 发送ajax出现中文乱码的解决方法汇总

    使用spingmvc,在JS里面通过ajax发送请求,并返回json格式的数据,从数据库拿出来是正确的中文格式,展示在页面上就是错误的??,研究了一下,有几种解决办法. 我使用的是sping-web-3.2.2,jar   方法一: 在@RequestMapping里面加入produces = "text/html;charset=UTF-8" @RequestMapping(value = "/configrole", method = RequestMethod

  • Spring MVC前端与后端5种ajax交互方法【总结】

    前端ajax与后端Spring MVC控制器有以下五种数据交互方式.(前台使用了dhtmlxGrid,后端使用了fastjson) 方式一 通过URL传参 通过URL挂接参数,如/auth/getUser?userid='6' 服务器端方法可编写为:getUser(String userid),也可新增其他参数如HttpSession, HttpServletRequest,HttpServletResponse,Mode,ModelAndView等. 方式二 单值传参 前台调用如: ajaxP

  • spring mvc 实现获取后端传递的值操作示例

    本文实例讲述了spring mvc 实现获取后端传递的值.分享给大家供大家参考,具体如下: jsp页面怎么获取从后端传递过来的值? JSTL 方法获取后端传递的值 @RequestMapping("index1") public ModelAndView index1() { ModelAndView model = new ModelAndView("/Index/index"); model.addObject("msg","my

  • Spring MVC 前端控制器 (DispatcherServlet)处理流程解析

    目录 Spring MVC 请求处理流程 DispatcherServlet 源码分析 Spring MVC 中的一些核心类 Spring MVC 请求处理流程 用户发起请求,到 DispatcherServlet; 然后到 HandlerMapping 返回处理器链(包含拦截器和具体处理的 Handler); 调用处理器链的适配器 HandlerAdapter 来处理: 执行具体的方法,比如 @RequestMapper修饰的逻辑处理方法: 返回结果的视图解析器: 最后进行视图解析和渲染返回结

  • Spring MVC 中 短信验证码功能的实现方法

    在外部网站中短信的验证很有必要,比如在实现注册.验证用户信息等的情况下.在SpringMVC中的实现如下: 短信接口 短信接口,有些企业会购买的有移动的短信平台接口.如果是个人或者是小企业可以使用一些云服务的.比如百度的API Store上面的. 我使用的是:http://apistore.baidu.com/apiworks/servicedetail/1018.html 当然短信接口肯定都是要付费的,而且是基于模板的,具体的使用说明可以看这个网址里面的使用说明. 前端界面 前端的界面,可能如

  • spring mvc 读取xml文件数据库配置参数的方法

    本文主要介绍怎么通过属性注入与构造器注入实现把我们项目中要用到的数据库参数放到xml文件里面去,方便部署. spring mvc 4.2.6项目 SQL Server 2008数据库 本文介绍的主要使用ApplicationContext以及其实现类实现.主要用到的是ClassPathXmlApplicationContext. ClassPathXmlApplicationContext:从类路径ClassPath中寻找指定的XML配置文件,找到并装载 完成ApplicationContext

  • Java Spring MVC 上传下载文件配置及controller方法详解

    下载: 1.在spring-mvc中配置(用于100M以下的文件下载) <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> <property name="messageConverters"> <list> <!--配置下载返回类型--> <bean class="or

  • spring Mvc配置xml使ResponseBody返回Json的方法示例

    前言 学习了spring mvc后,发现spring mvc返回json数据比struts2要方便,使用@ResponseBody就可以了 @ResponseBody 在返回的数据不是html标签的页面,而是其他某种格式的数据时(如json.xml等)使用: 不在springMvc中配置json的处理的话,我们通常会在Controller层中获取到数据之后进行类型转化,将数据转成json字符串,比如调用fastjson进行转化,如下 @RequestMapping("/getCategoryTr

  • AngularJS与后端php的数据交互方法

    简述: AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 它不仅仅是一个类库,而是提供了一个完整的框架.它避免了您和多个类库交互,需要熟悉多套接口的繁琐工作.它由Google Chrome的开发人员设计,引领着下一代Web应用开发.也许我们5年或10年后不会使用AngularJ

  • 在实战中可能碰到的几种ajax请求方法详解

    前言 最近在做一个针对单个节点测速的功能页面,测速的逻辑是,测上传速度时,前端传5m数据给server,记录上传和返回数据的时间,测下载速度时,从server下载1m的数据,记录下载和下载成功的时间,上传和下载用的是ajax同步以避免客户端带宽阻塞的问题,并进行3次取平均值.在开发过程过,因为ajax同步异步的问题,走了不少弯路,特地也把之前遇到的业务逻辑整理汇总一下. ajax请求方法如下 一.普通的ajax,async即同步异步处理,success之后,会有data返回值,status请求状

  • Spring MVC中自带的跨域问题解决方法

    前言 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.本文将详细介绍关于Spring MVC跨域问题解决的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 问题 使用Spring mvc 开发了一个Restful 接口 供前端调用 @PostMapping("/search") public List<Map> search(@RequestBody QueryParams qu

随机推荐