Ajax异步传值总结

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

}