ajax传递多参数类型,Ajax传递不同类型的参数

1、目录结构：

1.传递普通的参数

2.传递对象

3.传递List

4.传递数组

1.1 前端页面

前端页面.png

1.2 HTML代码

注意：需要引入layui噢

button{

margin-top: 50px;

margin-left: 20px;

}

Ajax 传递数值 实践

传递简单的参数

传递对象

传递集合

传递数组

2、传递一个普通的参数

2.1前端js

$("#params").click(function() {

$.ajax({

url: ctx + '/ajax/params',

dataType: 'json',

data: {userName: 'wangxianlin'},

type: 'get',

success: function(data) {

console.log("控制台输出：" + data.userName)

alert("传递基本参数：" + data.userName)

}, error: function(e) {

alert("服务器内部错误")

}

})

})

2.2 后端接口

/**

* 传递一个普通参数

* @param userName

* @return

*/

@GetMapping("/params")

@ResponseBody

public Map params(@RequestParam("userName") String userName){

Map map = new HashMap<>();

map.put("userName",userName);

return map;

}

2.3 测试结果

传递普通参数测试结果!.png

3、传递一个对象

3.1 前端js

// 对象的传递

$("#object").click(function() {

var user = {

userName : "wangxianlin",

passWord : "123456"

}

$.ajax({

url: ctx + '/ajax/object',

dataType: 'json',

data: JSON.stringify(user),

<