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="<%=request.getContextPath()%>/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/json2.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.json-2.3.js"></script> <link href="<%=request.getContextPath()%>/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="${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="${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="${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="${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="${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="${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="${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="${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="${User.id}" </c:when> <c:otherwise> value="0" </c:otherwise> </c:choose> /> <input id="btn1" type="button" class="c_botton" value="post方式：提交Form表單" /> <input id="btn2" type="button" class="c_botton" value="post方式：提交Form表單(方法二)" /> <input id="btn3" type="button" class="c_botton" value="post方式：提交多個對象" /> <input id="btn4" type="button" class="c_botton" value="get方式" /> <input id="btn5" type="button" class="c_botton" value="post傳參，方式一" /> <input id="btn6" type="button" class="c_botton" value="post傳參，方式二" /> <input id="btn7" type="button" class="c_botton" value="post傳參，方式三" />
<input id="btn8" type="button" class="c_botton" value="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="/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={"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 = "/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 = "/list", method = RequestMethod.GET) @ResponseBody public Map<String, Object> list(@RequestParam(value="id") String id,@RequestParam(value="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={"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="/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<String> list=new ArrayList<String>(); list.add("電視"); list.add("空調"); list.add("電冰箱"); return list; }
6.post方式傳參,后台通過request.getParameter接收
//post傳參，方式二 $("#btn6").click(function(){ var data={"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="/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=$("#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:'<%=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="/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="/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 = $("form").serialize();
功能：將表單內容序列化成一個字符串。
這樣在ajax提交表單數據時，就不用一一列舉出每一個參數。只需將data參數設置為 $("form").serialize() 即可。參數形式為："uname=alice&mobileIpt=110&birthday=1983-05-12"
4.特別注意在給表單賦值時，要和后台方法的參數或JavaBean中的屬性的數據類型一致，不然的話會報錯，最好在前台加校驗。我犯的一個錯誤是表單中年齡這個字段，我沒輸入值，這樣提交到后台為空，但是JaveBean中age為int型，所以不匹配，提交一直不成功，后來在頁面中輸入數值就可以了。