前端ajax异步传值以及后端接收参数的几种方式(Ajax asynchronous value transfer in front end and several methods of receiving parameters in back end)

转载自:https://www.jianshu.com/p/c3f20341d4ea

异步传值

前台往后台传值呢,有很多种方式,大家听我细细道来。

第一种呢,也是最简单的一种,通过get提交方式,将参数在链接中以问号的形式进行传递。

// 前台传值方法    
// 触发该方法调用ajax
    function testAjax(yourData) {
        $.ajax({
            type: "get", // 以get方式发起请求
            url: "/yourUrl?yourDataName=" + yourData, // 将你的请求参数以问号拼接到url中进行参数传递
            success:function(data) {
                // data为返回值
                // 成功后的回调方法
            }
        })
    }
// 后台接值方法
    @RequestMapping("/yourUrl")
    @ResponseBody
// @RequestParam("yourData")是必不可少的,因为他指定了链接中的参数名称
    public String yourUrl(@RequestParam("yourDataName") 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:function(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:function(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直接提交或者在链接中拼接参数即可。

<!-- form表单提交 -->
<form id="myForm" class="layui-form" action="/yourUrl" method="post">
    <input type="text" name="username" required placeholder="邮箱"/>
    <input type="password" name="username" required placeholder="密码"/>
    <button type="submit" class="layui-btn">登录</button>
</form>
<!-- a标签拼接参数 -->
<a href="/yourUrl?youDataName=yourData">问号传递参数</a>
<a href="/yourUrl/yourData">拼接链接传递参数</a>

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

转载自:https://www.jianshu.com/p/c3f20341d4ea

Asynchronous value transfer

There are many ways to pass the value from the front desk to the back. Listen to me carefully.

The first and simplest one is to pass parameters in the form of question marks in the link through get submission.

// 前台传值方法    
// 触发该方法调用ajax
    function testAjax(yourData) {
        $.ajax({
            type: "get", // 以get方式发起请求
            url: "/yourUrl?yourDataName=" + yourData, // 将你的请求参数以问号拼接到url中进行参数传递
            success:function(data) {
                // data为返回值
                // 成功后的回调方法
            }
        })
    }
// 后台接值方法
    @RequestMapping("/yourUrl")
    @ResponseBody
// @RequestParam("yourData")是必不可少的,因为他指定了链接中的参数名称
    public String yourUrl(@RequestParam("yourDataName") String yourData) {
        System.out.println(yourData);
        // 返回值可以自由定义
        return "SUCCESS";
    }

The second is to reflect the parameters in the link and transfer them through placeholder in the background.

// 前台传值方法,其实大体与上方相同只需注意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";
    }

The third way is to serialize the data in the form through post submission and transfer it to the background.

// 前台传值方法
function testAjax() {
       $.ajax({
           type: "post", // 以post方式发起请求
           url: "/yourUrl", // 你的请求链接
           data:$("#myForm").serialize(), // 对id为myForm的表单数据进行序列化并传递到后台
           success:function(data) {
               // data为返回值
               // 成功后的回调方法
           }
       })
   }
// 后台接值方法
@RequestMapping("/yourUrl")
 @ResponseBody
// 在这里我假设大家表单数据与User实体类相对应
 public String yourUrl(User user) {
     System.out.println(user.toString());
     return "SUCCESS";
 }

The fourth is Ajax asynchronous value transfer. The most common method is to use data to transfer values in the Ajax method body.

 // 前台传值方法
 function testAjax() {
        $.ajax({
            type: "post", // 以post方式发起请求
            url: "/yourUrl", // 你的请求链接
            data: { // 提交数据
                "username": "admin", // 前者为字段名,后者为数据
                "password": "admin"
            },
            success:function(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";
   }

It is easier to transfer values from the background to the foreground. For single data or encapsulated data, you can directly use return to return JSON data to the foreground. If there are multiple data, you can use printwriter to transfer values. The specific operations are as follows

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

Non asynchronous value transfer

Non asynchronous foreground transfer parameters
1. Similar to asynchronous mode, you can submit directly using form or splice parameters in the link.

<!-- form表单提交 -->
<form id="myForm" class="layui-form" action="/yourUrl" method="post">
    <input type="text" name="username" required placeholder="邮箱"/>
    <input type="password" name="username" required placeholder="密码"/>
    <button type="submit" class="layui-btn">登录</button>
</form>
<!-- a标签拼接参数 -->
<a href="/yourUrl?youDataName=yourData">问号传递参数</a>
<a href="/yourUrl/yourData">拼接链接传递参数</a>

2. The background acceptance parameter mode remains unchanged, which is exactly the same as the asynchronous mode.
Non asynchronous background data transfer to the front station

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