前端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直接提交或者在鏈接中拼接參數即可。

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