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