Jsp頁面：
需要引入jquery-1.10.2.min.js、json2.js、jquery.json-2.3.js三個檔案
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" /> |
頁面效果：
添加一個通用方法，用于将一個表單的資料傳回成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 : '/User/addUserInfo',
data : jsonuserinfo,
dataType : 'json',
success : function(data) {
alert("新增成功！");
},
error : function(data) {
alert("error")
}
});
});
背景方法：
@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='/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='/User/saveUserInfo';
var saveDataAry=[];
var data1={"user_name":"zhangsan","user_age":"25","user_email":"[email protected]"};
var data2={"user_name":"lisi","user_age":"26","user_email":"[email protected]"};
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);
}
})
})
背景方法：
@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 "{}";
}
4.get方式傳參，并且背景傳回map資料
//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")
}
});
})
背景方法：
@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;
}
5.post方式傳參,背景通過@RequestParam接收，并傳回List
//post傳參，方式一
$("#btn5").click(function(){
var data={"user_id":"111","user_name":"abc","user_email":"[email protected]"};
$.ajax({
url:'/User/loadData',
type:'POST',
//data也可設定成"user_id=111&user_name=abc&[email protected]"這種方式
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")
}
})
})
背景方法：
@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;
}
6.post方式傳參,背景通過request.getParameter接收
//post傳參，方式二
$("#btn6").click(function(){
var data={"user_id":"111","user_name":"abc","user_email":"[email protected]"};
$.ajax({
url:'/User/loadData1',
type:'POST',
data:data,
//contentType : 'application/json',
//隻傳回一個字元串，dataType要設定為“html”.
dataType:'html',
success:function(data){
alert(data);
},
error : function() {
alert("error")
}
})
})
@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":"[email protected]"};
//2.vat data="id=111&user_name=abc&[email protected]";
//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")
}
})
})
背景方法：
@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;
}
8.post方式送出參數，背景map接收
$("#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")
}
});
});
背景方法：
@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 "{}";
}
總結：
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型，是以不比對，送出一直不成功，後來在頁面中輸入數值就可以了。