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