java spring mvc ajax_springmvc与Ajax交互

最新推荐文章于 2021-09-06 23:52:49 发布
最新推荐文章于 2021-09-06 23:52:49 发布
阅读量206 收藏
点赞数
文章标签： java spring mvc ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39720662/article/details/114207343
版权

Jsp页面：

需要引入jquery-1.10.2.min.js、json2.js、jquery.json-2.3.js三个文件

48304ba5e6f9fe08f3fa1abda7d326ab.png

errorPage=""%>

springmvc与Ajax交互

用户信息
姓名：    

*

性别：    

请选择

selected = "selected">

${sexItem.text}

*

年龄：    

*

邮箱：    

*

电话：    

size="25" value="${User.user_telephone }" />

*

学历：    

请选择

selected = "selected">

${educationItem.text}

*

职称：    

请选择

selected = "selected">

${titleItem.text}

*

所属部门：    

请选择

selected = "selected">

${deptItem.dept_name}

*

value="${User.id}"

value="0"

/>

48304ba5e6f9fe08f3fa1abda7d326ab.png

页面效果：

d5a50cb37349cf4a5b5cd95eb630763c.png

添加一个通用方法，用于将一个表单的数据返回成JSON对象

48304ba5e6f9fe08f3fa1abda7d326ab.png

//将一个表单的数据返回成JSON对象

$.fn.serializeObject = function() {

var o = {};

var a = this.serializeArray();

$.each(a, function() {

if (o[this.name]) {

if (!o[this.name].push) {

o[this.name] = [ o[this.name] ];

}

o[this.name].push(this.value || '');

} else {

o[this.name] = this.value || '';

}

});

return o;

};

48304ba5e6f9fe08f3fa1abda7d326ab.png

1.post方式提交Form表单，后台JavaBean接收

48304ba5e6f9fe08f3fa1abda7d326ab.png

//提交Form表单

$("#btn1").click(function() {

var jsonuserinfo = JSON.stringify($('#form1').serializeObject());

alert(jsonuserinfo);

$.ajax({

type : 'POST',

contentType : 'application/json',

url : '/User/addUserInfo',

data : jsonuserinfo,

dataType : 'json',

success : function(data) {

alert("新增成功！");

},

error : function(data) {

alert("error")

}

});

});

48304ba5e6f9fe08f3fa1abda7d326ab.png

后台方法：

48304ba5e6f9fe08f3fa1abda7d326ab.png

/**

* ajax的post方式提交表单

* @param user

* @return

*/

@RequestMapping(value="/addUserInfo",method=RequestMethod.POST)

@ResponseBody

public String addUserInfo(@RequestBody User user){

System.out.println("user_name--------"+user.getUser_name());

System.out.println("user_sex--------"+user.getUser_sex());

System.out.println("user_age--------"+user.getUser_age());

System.out.println("user_email--------"+user.getUser_email());

System.out.println("user_title--------"+user.getUser_title());

System.out.println("user_education--------"+user.getUser_education());

System.out.println("user_telephone--------"+user.getUser_telephone());

return "{}";

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

注：(1)JSON.stringify(jsonobj) 方法用于将Json对象转换成一个Json字符串，相反，如果将一个Json字符串转换成Json对象，可以用JSON.parse(str) 得到。

48304ba5e6f9fe08f3fa1abda7d326ab.png

//需引入json2.js文件

//Json字符串转Json对象

var str = '{"name": "lxx", "age": "30"}';

var obj = JSON.parse(str); //或者用$.parseJSON(str);也可以

alert(obj.name);

//Json对象转Json字符串

var obj1={"name":"zhangsan","age":"25"};

alert(JSON.stringify(obj1));

48304ba5e6f9fe08f3fa1abda7d326ab.png

(2)@RequestBody接收的是一个Json对象的字符串，而不是一个Json对象，所以前台在传递数据的时候要将Json对象转换成Json字符串。

(3)Jquery ajax请求中有个dataType参数，作用是预期服务器返回的类型。如果设置为json，就要返回json格式的数据，而服务器返回空的话就会报ParseError，也就是说不能返回""，而要返回"{}"。

(4)form表单中控件的name属性要和JavaBean中的属性名称一致，如果有不一致的话就不会提交成功。另外赋值的时候要和JavaBean中字段的数据类型一致，例如年龄为int型，你在前台输了个字符串，也不会提交成功。

2.post方式提交Form表单，另一种方法

其实和上面的方法差不多，不同的就是上面方法中Json对象是通过serializeObject()方法创建的，而下面的方法中Json对象是我们根据json数据格式自己构建的。在提交的时候都需要转换成Json字符串，因为后台是通过@RequestBody接收。

48304ba5e6f9fe08f3fa1abda7d326ab.png

//提交Form表单，另一种方式

$("#btn2").click(function(){

var url='/User/addUserInfo';

var data={"user_name":$("#userName").val(),"user_sex":$("#userSex").val(),"user_age":$("#userAge").val(),

"user_email":$("#userEmail").val(),"user_telephone":$("#userTelephone").val(),"user_education":$("#userEducation").val(),

"user_title":$("#userTitle").val()};

$.ajax({

type:'POST',

contentType : 'application/json',

url:url,

dataType:"json",

data:JSON.stringify(data),

async:false,

success:function(data){

alert("新增成功！");

},

error: function(XMLHttpRequest, textStatus, errorThrown){

alert(XMLHttpRequest.status);

alert(XMLHttpRequest.readyState);

alert(textStatus);

}

})

})

48304ba5e6f9fe08f3fa1abda7d326ab.png

后台方法和上面的一致。

3.post方式提交多个对象，后台用List接收

48304ba5e6f9fe08f3fa1abda7d326ab.png

//提交多个对象

$("#btn3").click(function(){

var url='/User/saveUserInfo';

var saveDataAry=[];

var data1={"user_name":"zhangsan","user_age":"25","user_email":"zhangsan@sina.com"};

var data2={"user_name":"lisi","user_age":"26","user_email":"lisi@sina.com"};

saveDataAry.push(data1);

saveDataAry.push(data2);

$.ajax({

type:'POST',

contentType : 'application/json',

url:url,

dataType:"json",

data:JSON.stringify(saveDataAry),

async:false,

success:function(data){

alert("提交成功！");

},

error: function(XMLHttpRequest, textStatus, errorThrown){

alert(XMLHttpRequest.status);

alert(XMLHttpRequest.readyState);

alert(textStatus);

}

})

})

48304ba5e6f9fe08f3fa1abda7d326ab.png

后台方法：

48304ba5e6f9fe08f3fa1abda7d326ab.png

/**

* ajax提交多个对象

* @param users

* @return

*/

@RequestMapping(value = "/saveUserInfo", method = RequestMethod.POST)

@ResponseBody

public String saveUserInfo(@RequestBody List users) {

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

for(int i=0;i

System.out.println("user_name--------"+users.get(i).getUser_name());

System.out.println("user_age--------"+users.get(i).getUser_age());

System.out.println("user_email--------"+users.get(i).getUser_email());

}

}

return "{}";

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

4.get方式传参，并且后台返回map数据

48304ba5e6f9fe08f3fa1abda7d326ab.png

//get方式

$("#btn4").click(function(){

$.ajax( {

type : 'GET',

contentType : 'application/json',

url : '/User/list',

dataType : 'json',

data:'id=111&str=abc',

success : function(data) {

if (data && data.success == "true") {

alert("共" + data.total + "条数据。");

$.each(data.data, function(i, item) {

alert("姓名：" + item.user_name + "，年龄：" + item.user_age

+ "，性别：" + item.user_sex);

});

}

},

error : function() {

alert("error")

}

});

})

48304ba5e6f9fe08f3fa1abda7d326ab.png

后台方法：

48304ba5e6f9fe08f3fa1abda7d326ab.png

/**

* ajax的Get方式

* @param id

* @param str

* @return

*/

@RequestMapping(value = "/list", method = RequestMethod.GET)

@ResponseBody

public Map list(@RequestParam(value="id") String id,@RequestParam(value="str") String str) {

List list = new ArrayList();

User um = new User();

um.setUser_name("zhangsan");

um.setUser_age(25);

um.setUser_sex("男");

list.add(um);

Map modelMap = new HashMap(3);

modelMap.put("total", "1");

modelMap.put("data", list);

modelMap.put("success", "true");

return modelMap;

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

5.post方式传参,后台通过@RequestParam接收，并返回List

48304ba5e6f9fe08f3fa1abda7d326ab.png

//post传参，方式一

$("#btn5").click(function(){

var data={"user_id":"111","user_name":"abc","user_email":"aaa@sina.com"};

$.ajax({

url:'/User/loadData',

type:'POST',

//data也可设置成"user_id=111&user_name=abc&user_email=aaa@sina.com"这种方式

data:data,

//contentType : 'application/json',

//返回List或Map，dataType要设置为“json”.

dataType:'json',

success:function(data){

$(data).each(function (i, value) {

alert(value);

});

},

error : function() {

alert("error")

}

})

})

48304ba5e6f9fe08f3fa1abda7d326ab.png

后台方法：

48304ba5e6f9fe08f3fa1abda7d326ab.png

/**

* ajax post方式传参,通过@RequestParam接收

* @param user_id

* @param user_name

* @param user_email

* @return

*/

@RequestMapping(value="/loadData")

@ResponseBody

public List loadData(@RequestParam(value="user_id") int user_id,@RequestParam(value="user_name") String user_name,

@RequestParam(value="user_email") String user_email){

System.out.println(user_id);

System.out.println(user_name);

System.out.println(user_email);

List list=new ArrayList();

list.add("电视");

list.add("空调");

list.add("电冰箱");

return list;

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

6.post方式传参,后台通过request.getParameter接收

48304ba5e6f9fe08f3fa1abda7d326ab.png

//post传参，方式二

$("#btn6").click(function(){

var data={"user_id":"111","user_name":"abc","user_email":"aaa@sina.com"};

$.ajax({

url:'/User/loadData1',

type:'POST',

data:data,

//contentType : 'application/json',

//只返回一个字符串，dataType要设置为“html”.

dataType:'html',

success:function(data){

alert(data);

},

error : function() {

alert("error")

}

})

})

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

/**

* ajax post方式传参，通过request.getParameter方式接收

* @param user_id

* @param user_name

* @param user_email

* @return

*/

@RequestMapping(value="/loadData1")

@ResponseBody

public String loadData1(HttpServletRequest request,HttpServletResponse response){

String user_id=request.getParameter("user_id");

String user_name=request.getParameter("user_name");

String user_email=request.getParameter("user_email");

String result="success";

return result;

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

注意ajax的dataType要设置为html，因为后台返回的是字符串，不是json数据。

7.post方式传参,后台通过JavaBean接收

48304ba5e6f9fe08f3fa1abda7d326ab.png

//post传参，方式三

$("#btn7").click(function(){

var data=$("#form1").serialize();

//data可以有三种形式：

//1.var data={"id":"111","user_name":"abc","user_email":"aaa@sina.com"};

//2.vat data="id=111&user_name=abc&user_email=aaa@sina.com";

//3.var data=$("#form1").serialize();

alert($("#form1").serialize());

$.ajax({

url:'/User/loadData2',

type:'POST',

data:data,

//contentType : 'application/json',

//返回List或Map，dataType要设置为“json”.

dataType:'json',

success:function(data){

$(data).each(function (i, value) {

alert(value);

});

},

error : function() {

alert("error")

}

})

})

48304ba5e6f9fe08f3fa1abda7d326ab.png

后台方法：

48304ba5e6f9fe08f3fa1abda7d326ab.png

/**

* ajax post方式传参,通过JavaBean接收

* @param user_id

* @param user_name

* @param user_email

* @return

*/

@RequestMapping(value="/loadData2")

@ResponseBody

public List loadData2(User user){

System.out.println(user.getId());

System.out.println(user.getUser_name());

System.out.println(user.getUser_email());

List list=new ArrayList();

list.add("电视");

list.add("空调");

list.add("电冰箱");

return list;

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

8.post方式提交参数，后台map接收

48304ba5e6f9fe08f3fa1abda7d326ab.png

$("#btn8").click(function() {

var jsonuserinfo = JSON.stringify($('#form1').serializeObject());

alert(jsonuserinfo);

$.ajax({

type : 'POST',

contentType : 'application/json',

url : '/User/addUserInfo1',

data : jsonuserinfo,

dataType : 'json',

success : function(data) {

alert("新增成功！");

},

error : function(data) {

alert("error")

}

});

});

48304ba5e6f9fe08f3fa1abda7d326ab.png

后台方法：

48304ba5e6f9fe08f3fa1abda7d326ab.png

/**

* ajax的post方式提交表单,map接收

* @param user

* @return

*/

@RequestMapping(value="/addUserInfo1",method=RequestMethod.POST)

@ResponseBody

public String addUserInfo1(@RequestBody Map map){

Iterator it=map.keySet().iterator();

while(it.hasNext()){

String key=(String)it.next();

System.out.println(key+"----"+map.get(key));

}

return "{}";

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

总结：

1.springmvc与Ajax交互，可以传入三种类型的数据：

(1)文本："uname=alice&mobileIpt=110&birthday=1983-05-12"或通过$("#form1").serialize()方法，后台可通过@RequestParam注解或request.getParameter接收或JavaBean接收。

(2)json对象：{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}，如果后台用@RequestBody注解接收的话，前台需要将参数由Json对象转换成Json对象的字符串，如果不用@RequestBody注解接收，那么参数就不用转成Json字符串了，后台可通过@RequestParam注解或request.getParameter接收或JavaBean接收。

(3)json数组：[{"name":"uname","value":"alice"},{"name":"mobileIpt","value":"110"},{"name":"birthday","value":"2012-11-11"}]

前台需要将Json对象转换成Json对象的字符串，后台通过@RequestBody注解接收。

2.后台返回数据的话，如果返回List或Map的话，ajax的dataType要设置成"json"，如果返回的是字符串，dataType要设置成"html"。

3.其实提取表单数据的话只需要serialize()方法直接获取就可以了。

serialize()方法

格式：var data = $("form").serialize();

功能：将表单内容序列化成一个字符串。

这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。参数形式为："uname=alice&mobileIpt=110&birthday=1983-05-12"

4.特别注意在给表单赋值时，要和后台方法的参数或JavaBean中的属性的数据类型一致，不然的话会报错，最好在前台加校验。我犯的一个错误是表单中年龄这个字段，我没输入值，这样提交到后台为空，但是JaveBean中age为int型，所以不匹配，提交一直不成功，后来在页面中输入数值就可以了。

weixin_39720662
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
spring mvc 和ajax异步交互完整实例代码
08-31
在本文中，我们将深入探讨如何实现Spring MVC与Ajax的异步交互，并通过一个简单的实例来展示其实现过程。首先，我们需要了解Spring MVC和Ajax的基本概念。 Spring MVC是Spring框架的一部分，它是一个用于构建Web...
米米商城 html javaScript css jquery ajax java springmvc spring
04-04
【米米商城】是一个综合性的在线购物平台，其技术架构主要基于前端的HTML、JavaScript、CSS和jQuery，以及后端的Java、Spring MVC、Spring框架和MyBatis持久层技术，运行环境为Tomcat服务器，数据库选用MySQL。...
SpringMVC与ajax交互流程与实现
灵魂画师牧码
07-27 4045
先上Controller和ajax的代码 Controller代码：//@RequestMapping("")指的是路由根路径 @Controller @RequestMapping("") public class UserAction { private UserService userService; @Autowired public void setTransacti
java 前后端交互_Springmvc和ajax如何实现前后端交互
weixin_35970195的博客
02-24 499
springmvc使用@RequestBody来获取前端的json字符串并转化为java对象使用@ReponseBody来将返回的java对象转换为json形式返回前端下面是几个使用springmvc和ajax进行前后端交互的简单实例1.传递简单对象：前端：$(function(){$("#btn3").click(function(){//准备好要发的数组var array=[16,18,56]...
Ajax传输对象数组类型的参数到后台
weixin_43664019的博客
09-06 1163
项目中遇到一个问题，前端需要将一个对象数组传输到后台，经过查询资料，得到以下解决办法： Ajax实现对象数组传参到后台，可借助JSON进行传输。 前端将对象数组转换成JSON字符串，后台再将JSON字符串转换成数组 前端： let _list=new Array(); _list.push({"priv":"read","addRemove":readVal}) _list.push({"priv":"downloadFile","addRemove":downloadFileVal}
ajax传递对象
Gemini_Kanon的博客
06-30 909
记录贴： 前端： var param = {id: xxx, name: xxx} $.ajax({ type: "POST", dataType: "json", contentType:"application/json", url: "/xxx", data: JSON.stringify(param), success: function (result) { console.log(result) } }); 后端.
spring_mvc_ajax.zip_SpringMVC ajax_SpringMVC+ajax_spring ajax_sp
最新发布
09-23
通过“spring_mvc_ajax.zip”中的资源，你可以深入学习和实践SpringMVC与Ajax的集成，了解如何创建一个有效的异步数据交互系统。这个压缩包可能包含了相关的Java代码、HTML模板、JavaScript脚本以及配置文件，供你...
Spring MVC与Ajax交互源码
05-16
Spring MVC和Ajax是Web开发中的两个重要技术，它们在构建动态、交互性强的网页应用时起着关键作用。Spring MVC是Spring框架的一部分，提供了一种模型-视图-控制器（MVC）架构来组织和处理HTTP请求，而Ajax...
Spring MVC 中 AJAX请求并返回JSON的示例
10-20
在Spring MVC框架中，AJAX（Asynchronous JavaScript and XML）请求被广泛用于实现页面的异步更新，提高用户体验。本文将深入讲解如何在Spring MVC中通过AJAX发送请求，并返回JSON（JavaScript Object Notation）...
Spring MVC前端与后端5种ajax交互方法【总结】
12-12
前端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"
Springmvc和ajax如何实现前后端交互
08-19
主要介绍了Springmvc和ajax如何实现前后端交互,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
ajax j向Java传递参数,ajax传递参数方式 以及java后台获取方式
weixin_39630744的博客
03-31 481
1.文本形式/*** 订单取消* @return {Boolean} 处理是否成功*/function orderCancel(orderId, commant){var flag = false;$.ajax({type: "POST",url: "../order/orderCancel.action", //orderModifyStatusdata: {"orderId":orderId}...
【转】ajax向后端传递数据，后台通过变量、对象、Map接收。
beidaol的专栏
06-27 8668
转自：https://blog.csdn.net/zf18234031156/article/details/84298270 数据：{name:"zhangfan",age:"18"}这种形式的ajax都会被转换成name=zhangfan&age=18进行传输。 ajax: $.ajax({ url:"/testmap/testMap", type:"po...
Ajax传json格式数据到controller中，自动转为java对象
qq_44529072的博客
03-04 679
(Ajax传json格式数据到controller中，自动转为java对象) 如果controller方法中的接收参数为java对象的话，则自动会将传过来的json格式按照属性名一 一对应赋值给新创建的java对象。 例子： ajax发送的json数据： $.ajax({ url: "user_login", data: { "uno": "9527", "u
springMVC通过ajax传递参数list对象或传递数组对象到后台
热门推荐
neoEson
06-17 2万+
springMVC通过ajax传递参数list对象或传递数组对象到后台环境： 前台传递参数到后台 前台使用ajax 后台使用springMVC 传递的参数是N多个对象 JSON对象和JSON字符串在SpringMVC环境中，@RequestBody接收的是一个Json对象的字符串，而不是一个Json对象。然而在ajax请求往往传的都是Json对象，用 JSON.stringify(data)的方式就
Java将前台Ajax传过来的对象转成后台对象
Royi的博客
10-24 3596
今天遇到这样的情况： 由于才有前后台分离的开发方式，所以前台使用HTML，后台使用Java。 需要传递的对象： fpPkr{ name age .... } 前台Ajax调用的时候，使用JSON.stringify(fpPkr)将对象转成字符串，这没有问题。 但是后台接受的时候，需要转成FpPkr对象才能使用，而当FpPkr对象中包含字段很多的时候，new一个FpPkr对象将字符
java_springMVC_ajax
子龙修仙的博客
05-12 191
1) 引入jquery为了更方便的使用ajax，先引入jquery。在根目录（WEB-INF的上级目录）中新建一个js目录，将jquery复制过来： 然后在addUser.jsp中引入：<script type="text/javascript" src="http://localhost:8080/firstSpringMVC/js/jquery-1.11.2.min.js">&lt...
深度解析：Java Spring MVC面试关键点
"Java Spring MVC面试题" SpringMVC是一个由Spring框架提供的用于构建Web应用程序的模块，它遵循MVC（Model-View-Controller）设计模式，使得开发人员能够将业务逻辑、用户界面和数据访问分离开来，提高代码的可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值