1. 程式人生 > >jquery ajax傳參

jquery ajax傳參

一.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;
}