前端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