jquery ajax傳參
阿新 • • 發佈:2018-12-24
一.rest風格傳參在路徑上增加引數
html程式碼
$.ajax({
type: 'put',
url: '/update'+updateId, // updateId是自定義id
dataType : 'json',
success: function (result) {
// 回撥函式
}
})
後臺接收
@ResponseBody @PutMapping("/update/{updateId}") private String Test(@PathVariable String updateId){ System.out.println(updateId); return null; }
二. 路徑上使用?和&來傳參
html程式碼
$.ajax({
type: 'put',
url: '/up?id='+1+'&updateId='+2, // id和updateId是自定義的值
dataType : 'json',
success: function (result) {
// 回撥函式
}
})
後臺接收
@ResponseBody @PutMapping("/up") private String Test(@Param("id") String id,@Param("updateId") String updateId){ System.out.println(updateId); System.out.println(id); return null; }
三.使用data屬性傳引數
html程式碼
var id = "1";
var name = "張三";
$.ajax({
type:'put', // 請求方式
url:'/move // 路徑
dataType:'json', // 這裡是指定了引數的型別
data:{ 'id': id , 'name':name},
success: function (result) {
// 回撥函式
}
})
後臺接收
@ResponseBody @PutMapping("/move") private String Test(String id,String name){ System.out.println(name); System.out.println(id); return null; }
四.傳遞form表單
html程式碼,建立一個form表單
<!-- onsubmit="return false":防止表單自己提交 -->
<form id="fm" onsubmit="return false">
請輸入名字:<input name="name" value="張三"/>
請輸入id:<input name="id" value="2"/>
<button href="javascript:void(0)" id="tijiao" >提交</button>
</form>
ajax程式碼:
$("#tijiao").click(function(){
$.ajax({
type:'put',
url:'/form',
dataType:'json',
data:$('#fm').serialize(), //根據表單裡面的name屬性傳引數
success: function (result) {
// 回撥函式
}
})
})
後臺接收1
@ResponseBody
@PutMapping("/form")
private String Test(String id,String name){ // 這裡的id和name對應著表單裡面的name屬性
System.out.println(name);
System.out.println(id);
return null;
}
後臺接收2
// 推薦
@ResponseBody
@PutMapping("/form")
private String Test(TreeData treeData){
System.out.println(treeData);
return null;
}
TreeData實體類
@Data
public class TreeData {
private int id; // 裡面有表單對應的id屬性,所以拿實體類接收,這個id欄位可以接收表單傳過來的id值
private String region;
private int _parentId;
private int sortNumber;
private String text;
private List children;
private String state;
private String iconCls;
private String name; // 和上面一樣
}
五.ajax傳一個數組
html程式碼
var ids = [];
for(var i=0; i<10; i++){
ids[i] = i;
}
$.ajax({
type:'put',
url:'/array',
dataType:'json',
data:JSON.stringify(ids),
contentType:"application/json",
success: function (result) {
// 回撥函式
}
})
後臺接收
@ResponseBody
@PutMapping("/array")
private String Test( @RequestBody List<String> ids){
System.out.println(ids);
return null;
}
六.傳一個物件陣列
html程式碼
var list = [];
var obj = {"id":1,"name":"張三"};
var obj1 = {"id":2,"name":"李四"};
list.push(obj);
list.push(obj1);
console.log(list);
$.ajax({
type:'put',
url:'/array',
dataType:'json',
data:JSON.stringify(list),
contentType:"application/json",
success: function (result) {
// 回撥函式
}
})
後臺接收
// 這裡有個坑,get請是接收不了的
@ResponseBody
@PutMapping("/array")
private String Test( @RequestBody List<Map<String, String>> list){
System.out.println(list);
return null;
}