一、非Ajax傳遞參數
JSP頁面程序:
......
if(content!=null && content!=""){
//根據content和name查詢數據庫
$.post("/user/search",{content:content, name:name}, function(json){
$("#userList").datagrid('loadData',json);
});
}
else{
$.messager.alert('提示','請輸入查詢信息!');
};
}
......
後臺接收:
......
@RequestMapping("/user/search")
@ResponseBody
public EUDataGridResult getUserByContent(String content,String name) {
EUDataGridResult result = adminService.getUserByContent( content, name);
return result;
}
......
二、Ajax傳遞普通參數
1、無參數
JSP頁面程序:
......
//獲取用戶role
$.ajax({
type : "get",
url :"/user/checkRole",
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {
if(data.status !=200 ){
$('#warehouse-add').removeAttr('onclick');
$('#warehouse-edit').removeAttr('onclick');
$('#warehouse-delete').removeAttr('onclick');
};
},
error:function(){
$.messager.alert("提示","獲取用戶數據失敗");
}
});
......
後臺接收:
......
//獲取用戶身份
@RequestMapping("/user/checkRole")
@ResponseBody
public Warehouse checkRole(HttpServletRequest request){
String role =(String)request.getSession().getAttribute("role");
if (role != null){
if(role.equals("管理員")){
return Warehouse.build(200, role);
}
}
return Warehouse.build(500, "非管理員");
}
......
2、有參數(GET:參數附在URL中)
jsp頁面代碼:
......
$.ajax({
type : "get",
url : "/item/check?itemId="+itemId,
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {
$('#orderObjname').textbox('setValue',"");
$('#orderobjbarcode').textbox('setValue',"");
$('#orderforWH').combobox('setValue',"");
$('#orderObjname').textbox('setValue',data.title);
$('#orderobjbarcode').textbox('setValue',data.barcode);
$('#orderforWH').combobox('setValue',data.warehouseid);
},
error:function(){
$.messager.alert("提示","庫中無ID爲"+itemId+"的貨物!");
}
});
......
後臺需用到“@RequestParam”,接收代碼:
......
@RequestMapping("/item/check")
@ResponseBody
public TbItem getItemById(@RequestParam String itemId) {
long id = Long.parseLong(itemId);
TbItem result = itemService.getItemById(id);
return result;
}
......
3、有參數(POST:參數附在Ajax屬性中)
JSP頁面程序:
......
var ackPassword = $('#ackPassword').val();
$.ajax({
url :"/person/identify/password",
type : "post",
data : {password : ackPassword},
dataType:"json",
contentType : "application/x-www-form-urlencoded; charset=UTF-8",
success : function(data){
if(data.status == 200){
$("#passwordEditACKWindow").window({
}).window("close");
$("#passwordEditWindow").window({
}).window("open");
}
else $.messager.alert('提示',data.msg);
},
error : function(e){
$.messager.alert('提示','密碼更新失敗!');
},
});
......
後臺接收:
......
//用戶修改密碼,原密碼確認
@RequestMapping("/person/identify/password")
@ResponseBody
public Warehouse identifyPassword(HttpServletRequest request,String password){
HttpSession session = request.getSession();
String username = (String)session.getAttribute("username");
TbUser user = adminService.getUserByName(username);
if (password.equals(user.getPassword())) {
return Warehouse.build(200, "原密碼正確!");
}
return Warehouse.build(400,"原密碼不正確,請重新輸入!");
}
......
三、Ajax傳遞Json參數
1、直接以實體類對象接收
JSP頁面程序:
......
var order = {
orderId : $("#orderId").val(),
paymentType : $("input[name='orderType']:checked").val(),
objectId : $("#orderObjid").val(),
operObject : $("#orderObjname").val(),
barcode : $("#orderobjbarcode").val(),
objNum : $("#orderobjnum").val(),
source : $("input[name='ordersource']:checked").val(),
warehouseid : $('#orderforWH').combobox('getValue'),
warehousename : $('#orderforWH').combobox('getText'),
userId : $("#orderoperid").val(),
opername : $("#orderopername").val(),
orderDesc : $("#orderdesc").val(),
};
//新增訂單記錄
$.ajax({
url :"/order/add",
type : "post",
data : order,
dataType:"json",
contentType : "application/x-www-form-urlencoded; charset=UTF-8",
success : function(data){
$.messager.alert('提示','成功登記新訂單,可到“訂單列表”查看訂單信息!');
clearForm();
},
error : function(e){
$.messager.alert('提示','表單填寫錯誤,訂單登記失敗!');
},
});
......
後臺接收程序:
......
@RequestMapping("/order/add")
@ResponseBody
public Warehouse addOrder(TbOrder order) {
Warehouse result = orderService.addOrder(order);
return result;
}
......
2、以註解“@RequestBody”接收
JSP頁面程序:
......
var user = {
username : $("#add-username").val(),
password : $("#add-userpassword").val(),
roleid : $("input[name='add-role']:checked").val(),
name : $("#add-name").val(),
phone : $("#add-userphone").val(),
email : $("#add-useremail").val(),
};
$.ajax({
url :"/user/update/add",
type : "post",
data : JSON.stringify(user),
dataType:"json",
contentType : "application/json; charset=utf-8",
success : function(data){
if(data.status ==200 ){
$("#userAddWindow").window({
}).window("close");
$("#userList").datagrid("reload");
$.messager.alert('提示',data.msg);
}
else
$.messager.alert('提示',data.msg);
},
error : function(e){
$.messager.alert('提示','添加用戶失敗!');
},
});
......
後臺接收程序:
......
@RequestMapping("/user/update/add")
@ResponseBody
public Warehouse AddUser(@RequestBody TbUser user){
if ((!user.getUsername().equals("")) && (!user.getPassword().equals("")) && (!user.getRoleid().equals("")) && (!user.getName().equals("")) && (!user.getPhone().equals(""))) {
TbUser user2 = adminService.getUserByName(user.getUsername());
if (user2 == null) {//若用戶名不重複
Warehouse result = adminService.addUser(user);
return result;
}
else
return Warehouse.build(400, "該用戶名已存在!");
}
return Warehouse.build(400, "請填寫完整信息!");
}
......
關於“@RequestBody ”:
1、Ajax的contentType屬性值通常有三種,默認取第一種:
- application/x-www-form-urlcoded
- application/json
- application/xml
@requestBody註解常用來處理contentType非默認的編碼情況,即另外兩種取值:application/json或application/xml。(除了常見的json、XML,還可以指定 html、jsonp、script或者text)一般情況下,常用其來處理application/json類型,這個時候,@RequestBody接收的是一個json格式的字符串。
2、通過@requestBody可以將請求體中的JSON字符串綁定到相應的bean上,當然,也可以將其分別綁定到對應的字符串上。
這種情況是將JSON字符串中的變量的值分別賦給了bean上的字符串,但是,假如我有一個User類,擁有如下字段:
String userName;
String pwd;
那麼接收函數的參數可以改爲以下形式:@requestBody User user ,這種形式會將JSON字符串中的值賦予user中對應的屬性上。
注:
1、JSON字符串中的key必須對應user中的屬性名,json中值的數據類型需要與屬性值的數據類型一致,否則是請求不過去的。
總結:
2、不要將JSON字符串和JSON對象混淆。
Json字符串:user_str = '{"name":"張三","password":"123456"}'
Json對象:user_obj = {"name":"張三","password":"123456"}
A、Json字符串轉換爲Json對象:
Jobj = JSON.parse(user_str)
Jobj = user_str.parseJSON()
B、JSON對象轉換爲字符串形式:
Jstr = user_obj.toJSONString()
Jstr = JSON.stringify(user_obj)