前端ajax非同步傳值以及後端接收引數的幾種方式

姜飛祥發表於2019-01-01
前端非同步後端

原文參考

非同步傳值

前臺往後臺傳值呢，有很多種方式，大家聽我細細道來。

第一種呢，也是最簡單的一種，通過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直接提交或者在連結中拼接引數即可。




問號傳遞引數
拼接連結傳遞引數


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

“`

相關文章