Ajax异步传值以及后端接收参数的4种方式

Posted 2021-04-15 eclipse编程

通过使用ajax技术，将客户端数据传递给服务端，服务端处理后返回数据给客户端进一步处理，客户端浏览器不必刷新整个页面，只需要刷新部分内容。

01

get提交，参数在url中以 ？的形式进行传递

//前台传值方法$("#username").blur(function(){ var username=$(this).val(); $.get({ url : "${path}/employee/checkName?username="+username,         success:function(data){ }); // 后台接值方法@RequestMapping("/employee/checkName")@ResponseBody// @RequestParam("username")必不可少，这个注解说明了url中参数的名称public String yourUrl(@RequestParam("username") String username) {      System.out.println(username); return "SUCCESS"; }

02

参数拼接在url中，后台用占位符进行接收

//前台传值方法$("#username").blur(function(){ var username=$(this).val();        $.ajax{ url : "${path}/employee/checkName/"+username, success:function(data){ }); // 后台接值方法@RequestMapping("/employee/checkName/{username}")@ResponseBody// @PathVariable("username")必须要写，这个注解指明了url中参数的位置public String yourUrl(@PathVariable("username") String username) { System.out.println(username); return "SUCCESS"; }

03

用data进行传值

//前台传值方法$("#username").blur(function(){ var username=$(this).val(); $.ajax{         url : "${path}/employee/checkName",          data:{"username":username},// 前面为参数名，后面为参数的值 success:function(data){ }); // 后台接值方法@RequestMapping("/employee/checkName")@ResponseBodypublic String yourUrl(@RequestParam("username") String username) { System.out.println(username); return "SUCCESS"; }

04

数据序列化

//前台传值方法$("#username").blur(function(){ var username=$(this).val(); $.ajax{ url : "${path}/employee/checkName",          data:$("#aform").serialize(), // 对id为aform的表单数据进行序列化并传递到后台 success:function(data){ }); // 后台接值方法@RequestMapping("/employee/checkName")@ResponseBodypublic String yourUrl(User user) {      System.out.println(user.getUsername()); return "SUCCESS"; }

/ END /

作者简介：一颗雷布斯，坚持学习的程序猿一枚，不爱穿格子衫，发量超级多，喜欢解决各种bug。