Ajax异步传值
将数据从前台传向后台：
1：通过get方式，将参数在链接中，配合“？”进行传值。
实例：
//前台传值方法
//触发该方法调用ajax
function testAjax(yourData) {
$.ajax({
type: "get", // 以get方式发起请求
url: "/yourUrl?yourDataName=" + yourData, // 将你的请求参数以问号拼接到url中进行参数传递
success(data) {
// data为返回值
// 成功后的回调方法
}
})
}
//后台接值方法
@RequestMapping("/yourUrl")
@ResponseBody
//@RequestParam("yourData")是必不可少的，因为他指定了链接中的参数名称
public String yourUrl(@RequestParam("yourData") String yourData) {
System.out.println(yourData);
// 返回值可以自由定义
return "SUCCESS";
}
2：将参数直接拼接在链接中，后台通过占位符进行传递
//前台
function addTec(tecId) {
$.ajax({
cache : true,
type : "get",
url : "/factory/tec/listOrderNumByMatId/"+tecId,
async : false,
success : function(data) {
}
});
}
//后台
@GetMapping("/factory/tec/listOrderNumByMatId/{tecId}")
String add(Model model, @PathVariable("tecId") Long tecId) {
System.out.println(tecId);
}
3：通过post提交方式将form表单中的数据序列化后传递到后台。
//前台传值方法
function testAjax() {
$.ajax({
type: "post", // 以post方式发起请求
url: "/yourUrl", // 你的请求链接
data:$("#myForm").serialize(), // 对id为myForm的表单数据进行序列化并传递到后台
success(data) {
// data为返回值
// 成功后的回调方法
}
})
}
后台一般通过一个实体类进行接收
//后台接值方法
@RequestMapping("/yourUrl")
@ResponseBody
// 在这里我假设大家表单数据与User实体类相对应
public String yourUrl(User user) {
System.out.println(user.toString());
return "SUCCESS";
}
4：通过通过ajax中的data参数以map（key-value）的方式向后台传值。
//前台传值方法
function testAjax() {
$.ajax({
type: "post", // 以post方式发起请求
url: "/yourUrl", // 你的请求链接
data: { // 提交数据
"username": "admin", // 前者为字段名，后者为数据
"password": "admin"
},
success(data) {
// data为返回值
// 成功后的回调方法
}
})
}
//后台接值方法
@RequestMapping("/yourUrl")
@ResponseBody
// 在这里我假设大家表单数据与User实体类相对应
public String yourUrl(@RequestParam("username") String username, @RequestParam("password") String password) {
System.out.println("username="+username+";password="+password);
return "SUCCESS";
}