前端ajax异步传值以及后端接收参数的几种方式
前台往后台传值呢,有很多种方式,大家听我细细道来。
第一种呢,也是最简单的一种,通过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"; }
第二种呢,是将参数体现到链接中,在后台通过占位进行传递。
// 前台传值方法,其实大体与上方相同只需注意url即可 // 触发该方法调用ajax function testAjax(yourData) { $.ajax({ type: "get", // 以get方式发起请求 url: "/yourUrl/"+yourData, // 将你的请求参数拼接到url中进行参数传递 success(data) { // data为返回值 // 成功后的回调方法 } }) }
// 后台接值方法 @RequestMapping("/yourUrl/{yourDataName}") @ResponseBody // 同样@PathVariable("yourDataName")必不可少,因为他指定链接中某个位置代表着名为yourDataName的变量 public String yourUrl(@PathVariable("yourDataName") String yourData) { System.out.println(yourData); // 返回值可以*定义 return "SUCCESS"; }
第三种呢,通过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"; }
第四种呢,就是Ajax异步传值最常见 的在ajax方法体中使用data进行传值。
// 前台传值方法 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"; }
原文摘自:https://www.cnblogs.com/smfx1314/p/10205736.html