前端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"; ????}

后台往前台传值就要简单一些，单个数据或者封装数据可以直接使用return返回json数据给前台，如果是多个数据，可以使用PrintWriter进行传值，具体操作如下
PrintWriter out = response.getWriter();
try {
out.write("yourWillReturnData");
} catch (Exception e) {
e.printStackTrace();
}finally{
out.close();
}

// 无论通过那种方式，只需在前台Ajax得success回调方法中对数据进行处理即可,我们以user为例
success(user){
alert("返回的用户名为:"+user.username+"!!!密码为:"+user.password);
// 在浏览器控制台打印结果，点击f12可以查看
console.log("返回的用户名为:"+user.username+"!!!密码为:"+user.password);
}

非异步方式传值非异步方式前台传递参数1.与异步方式类似，使用form直接提交或者在链接中拼接参数即可。

问号传递参数
拼接链接传递参数

2.后台接受参数方式不变，与异步方式完全相同。非异步方式后台向前台传递数据

// 1.可以通过session进行参数传递
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通过request获取session，然后向session中放入参数key-value
request.getSession().setAttribute("yourDataName", "yourData");
// 跳转到你的视图
return "/yourViews";
}

// 2.可以通过Model进行参数传递@RequestMapping("/yourUrl")public String yourUrl(Model model) { ???// 向model中加入参数key-value ???model.addAttribute("yourDataName", "yourData"); ???// 跳转到你的视图 ???return "/yourViews";}// 3.同样可以用request进行参数传递@RequestMapping("/yourUrl")public String yourUrl(HttpServletRequest request) { ???// 通过request放入参数key-value ???request.setAttribute("yourDataName", "yourData"); ???// 跳转到你的视图 ???return "/yourViews";}

```

前端ajax异步传值以及后端接收参数的几种方式

原文地址：https://www.cnblogs.com/smfx1314/p/10205736.html