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