首页 > 代码库 > springmvc与Ajax交互
springmvc与Ajax交互
Jsp页面：
需要引入jquery-1.10.2.min.js、json2.js、jquery.json-2.3.js三个文件
<%@ page contentType="text/html; charset=utf-8" language="java"
errorPage=""%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>springmvc与Ajax交互</title>
<script type="text/javascript" src="http://www.mamicode.com//js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com//js/json2.js"></script>
<script type="text/javascript" src="http://www.mamicode.com//js/jquery.json-2.3.js"></script>
<link href="http://www.mamicode.com//css/newmain1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3></h3>
<form id="form1" action="<%=request.getContextPath()%>/User/saveUser" method="post" onsubmit="return chkInfo(this);">
<div class="right_main" align="center" id="div_operate">
<div class="form_title" style="width: 60%">
<div class="title_leftbg"></div>
<div class="title_nr">用户信息</div>
<div class="title_rightbg"></div>
</div>
<div class="right_bg" style="width: 60%">
<div class="right_main">
<table width="60%" border="1" align="center" class="table_normal">
<tr>
<td width="25%" style="text-align: right;">姓名： </td>
<td style="text-align: left;">
<input type="text" id="userName" name="user_name" size="25" value="http://www.mamicode.com/${User.user_name }"/>
<span class="xing">*</span>
</td>
</tr>
<tr>
<td width="25%" style="text-align: right;">性别： </td>
<td style="text-align: left;">
<select id="userSex" name="user_sex" style="width:186" >
<option value="">请选择</option>
<c:if test="${!empty sexList}">
<c:forEach items="${sexList}" var="sexItem">
<option value="http://www.mamicode.com/${sexItem.value}"
<c:if test="${sexItem.value eq User.user_sex}">selected = "selected"</c:if>>
${sexItem.text}
</option>
</c:forEach>
</c:if>
</select>
<span class="xing">*</span>
</td>
</tr>
<tr>
<td width="25%" style="text-align: right;">年龄： </td>
<td style="text-align: left;">
<input type="text" id="userAge" name="user_age" size="25" value="http://www.mamicode.com/${User.user_age }" />
<span class="xing">*</span>
</td>
</tr>
<tr>
<td width="25%" style="text-align: right;">邮箱：
</td>
<td style="text-align: left;">
<input type="text" id="userEmail" name="user_email" size="25" value="http://www.mamicode.com/${User.user_email}" />
<span class="xing">*</span>
</td>
</tr>
<tr>
<td width="25%" style="text-align: right;">电话： </td>
<td style="text-align: left;">
<input type="text" id="userTelephone" name="user_telephone"
size="25" value="http://www.mamicode.com/${User.user_telephone }" />
<span class="xing">*</span>
</td>
</tr>
<tr>
<td width="25%" style="text-align: right;">学历： </td>
<td style="text-align: left;">
<select id="userEducation" name="user_education" style="width:186" >
<option value="">请选择</option>
<c:if test="${!empty educationList}">
<c:forEach items="${educationList}" var="educationItem">
<option value="http://www.mamicode.com/${educationItem.value}"
<c:if test="${educationItem.value eq User.user_education}">
selected = "selected"</c:if>>
${educationItem.text}
</option>
</c:forEach>
</c:if>
</select>
<span class="xing">*</span>
</td>
</tr>
<tr>
<td width="25%" style="text-align: right;">职称： </td>
<td style="text-align: left;">
<select id="userTitle" name="user_title" style="width:186" >
<option value="">请选择</option>
<c:if test="${!empty titleList}">
<c:forEach items="${titleList}" var="titleItem">
<option value="http://www.mamicode.com/${titleItem.value}"
<c:if test="${titleItem.value eq User.user_title}">selected = "selected"</c:if>>
${titleItem.text}
</option>
</c:forEach>
</c:if>
</select>
<span class="xing">*</span>
</td>
</tr>
<tr>
<td width="25%" style="text-align: right;">所属部门： </td>
<td style="text-align: left;">
<select id="userDept" name="dept_id" style="width:186" >
<option value="">请选择</option>
<c:if test="${!empty deptList}">
<c:forEach items="${deptList}" var="deptItem">
<option value="http://www.mamicode.com/${deptItem.id}"
<c:if test="${deptItem.id eq User.dept_id}">selected = "selected"</c:if>>
${deptItem.dept_name}
</option>
</c:forEach>
</c:if>
</select>
<span class="xing">*</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="hidden" name="id"
<c:choose>
<c:when test="${User.id !=null}">
value="http://www.mamicode.com/${User.id}"
</c:when>
<c:otherwise>
value="http://www.mamicode.com/0"
</c:otherwise>
</c:choose>
/>
<input id="btn1" type="button" class="c_botton" value="http://www.mamicode.com/post方式：提交Form表单" />
<input id="btn2" type="button" class="c_botton" value="http://www.mamicode.com/post方式：提交Form表单(方法二)" />
<input id="btn3" type="button" class="c_botton" value="http://www.mamicode.com/post方式：提交多个对象" />
<input id="btn4" type="button" class="c_botton" value="http://www.mamicode.com/get方式" />
<input id="btn5" type="button" class="c_botton" value="http://www.mamicode.com/post传参，方式一" />
<input id="btn6" type="button" class="c_botton" value="http://www.mamicode.com/post传参，方式二" />
<input id="btn7" type="button" class="c_botton" value="http://www.mamicode.com/post传参，方式三" />
<input id="btn8" type="button" class="c_botton" value="http://www.mamicode.com/post方式提交，map接收" />
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
页面效果：
添加一个通用方法，用于将一个表单的数据返回成JSON对象
//将一个表单的数据返回成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;
};
1.post方式提交Form表单，后台JavaBean接收
//提交Form表单
$("#btn1").click(function() {
var jsonuserinfo = JSON.stringify($(‘#form1‘).serializeObject());
alert(jsonuserinfo);
$.ajax({
type : ‘POST‘,
contentType : ‘application/json‘,
url : ‘<%=request.getContextPath()%>/User/addUserInfo‘,
data : jsonuserinfo,
dataType : ‘json‘,
success : function(data) {
alert("新增成功！");
},
error : function(data) {
alert("error")
}
});
});
后台方法：
/**
* ajax的post方式提交表单
* @param user
* @return
*/
@RequestMapping(value="http://www.mamicode.com/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 "{}";
}
注：（1）JSON.stringify(jsonobj) 方法用于将Json对象转换成一个Json字符串，相反，如果将一个Json字符串转换成Json对象，可以用JSON.parse(str) 得到。
//需引入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));
（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接收。
//提交Form表单，另一种方式
$("#btn2").click(function(){
var url=‘<%=request.getContextPath()%>/User/addUserInfo‘;
var data=http://www.mamicode.com/{"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);
}
})
})
后台方法和上面的一致。
3.post方式提交多个对象，后台用List接收
//提交多个对象
$("#btn3").click(function(){
var url=‘<%=request.getContextPath()%>/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);
}
})
})
后台方法：
/**
* ajax提交多个对象
* @param users
* @return
*/
@RequestMapping(value = "http://www.mamicode.com/saveUserInfo", method = RequestMethod.POST)
@ResponseBody
public String saveUserInfo(@RequestBody List<User> users) {
if(users!=null && users.size()>0){
for(int i=0;i<users.size();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 "{}";
}
4.get方式传参，并且后台返回map数据
//get方式
$("#btn4").click(function(){
$.ajax( {
type : ‘GET‘,
contentType : ‘application/json‘,
url : ‘<%=request.getContextPath()%>/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")
}
});
})
后台方法：
/**
* ajax的Get方式
* @param id
* @param str
* @return
*/
@RequestMapping(value = "http://www.mamicode.com/list", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> list(@RequestParam(value="http://www.mamicode.com/id") String id,@RequestParam(value="http://www.mamicode.com/str") String str) {
List<User> list = new ArrayList<User>();
User um = new User();
um.setUser_name("zhangsan");
um.setUser_age(25);
um.setUser_sex("男");
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>(3);
modelMap.put("total", "1");
modelMap.put("data", list);
modelMap.put("success", "true");
return modelMap;
}
5.post方式传参,后台通过@RequestParam接收，并返回List
//post传参，方式一
$("#btn5").click(function(){
var data=http://www.mamicode.com/{"user_id":"111","user_name":"abc","user_email":"aaa@sina.com"};
$.ajax({
url:‘<%=request.getContextPath()%>/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")
}
})
})
后台方法：
/**
* ajax post方式传参,通过@RequestParam接收
* @param user_id
* @param user_name
* @param user_email
* @return
*/
@RequestMapping(value="http://www.mamicode.com/loadData")
@ResponseBody
public List loadData(@RequestParam(value="http://www.mamicode.com/user_id") int user_id,@RequestParam(value="http://www.mamicode.com/user_name") String user_name,
@RequestParam(value="http://www.mamicode.com/user_email") String user_email){
System.out.println(user_id);
System.out.println(user_name);
System.out.println(user_email);
List<String> list=new ArrayList<String>();
list.add("电视");
list.add("空调");
list.add("电冰箱");
return list;
}
6.post方式传参,后台通过request.getParameter接收
//post传参，方式二
$("#btn6").click(function(){
var data=http://www.mamicode.com/{"user_id":"111","user_name":"abc","user_email":"aaa@sina.com"};
$.ajax({
url:‘<%=request.getContextPath()%>/User/loadData1‘,
type:‘POST‘,
data:data,
//contentType : ‘application/json‘,
//只返回一个字符串，dataType要设置为“html”.
dataType:‘html‘,
success:function(data){
alert(data);
},
error : function() {
alert("error")
}
})
})
/**
* ajax post方式传参，通过request.getParameter方式接收
* @param user_id
* @param user_name
* @param user_email
* @return
*/
@RequestMapping(value="http://www.mamicode.com/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;
}
注意ajax的dataType要设置为html，因为后台返回的是字符串，不是json数据。
7.post方式传参,后台通过JavaBean接收
//post传参，方式三
$("#btn7").click(function(){
var data=http://www.mamicode.com/$("#form1").serialize();
//data可以有三种形式：
//1.var data=http://www.mamicode.com/{"id":"111","user_name":"abc","user_email":"aaa@sina.com"};
//2.vat data="http://www.mamicode.com/id=111&user_name=abc&user_email=aaa@sina.com";
//3.var data=http://www.mamicode.com/$("#form1").serialize();
alert($("#form1").serialize());
$.ajax({
url:‘<%=request.getContextPath()%>/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")
}
})
})
后台方法：
/**
* ajax post方式传参,通过JavaBean接收
* @param user_id
* @param user_name
* @param user_email
* @return
*/
@RequestMapping(value="http://www.mamicode.com/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<String> list=new ArrayList<String>();
list.add("电视");
list.add("空调");
list.add("电冰箱");
return list;
}
8.post方式提交参数，后台map接收
$("#btn8").click(function() {
var jsonuserinfo = JSON.stringify($(‘#form1‘).serializeObject());
alert(jsonuserinfo);
$.ajax({
type : ‘POST‘,
contentType : ‘application/json‘,
url : ‘<%=request.getContextPath()%>/User/addUserInfo1‘,
data : jsonuserinfo,
dataType : ‘json‘,
success : function(data) {
alert("新增成功！");
},
error : function(data) {
alert("error")
}
});
});
后台方法：
/**
* ajax的post方式提交表单,map接收
* @param user
* @return
*/
@RequestMapping(value="http://www.mamicode.com/addUserInfo1",method=RequestMethod.POST)
@ResponseBody
public String addUserInfo1(@RequestBody Map<String,String> map){
Iterator it=map.keySet().iterator();
while(it.hasNext()){
String key=(String)it.next();
System.out.println(key+"----"+map.get(key));
}
return "{}";
}
总结：
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 = http://www.mamicode.com/$("form").serialize();
功能：将表单内容序列化成一个字符串。
这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。参数形式为："uname=alice&mobileIpt=110&birthday=1983-05-12"
4.特别注意在给表单赋值时，要和后台方法的参数或JavaBean中的属性的数据类型一致，不然的话会报错，最好在前台加校验。我犯的一个错误是表单中年龄这个字段，我没输入值，这样提交到后台为空，但是JaveBean中age为int型，所以不匹配，提交一直不成功，后来在页面中输入数值就可以了。
springmvc与Ajax交互
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。