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

小灰灰 2021-11-05 16:00 337阅读 0赞

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

第一种呢，也是最简单的一种，通过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

转载于:https://www.cnblogs.com/yu-shang/p/11169719.html