ajax異步傳值及后端接收參數(shù)的多種方式小結(jié)

更新時間：2023年11月20日 14:41:48 作者：小王努力吖

這篇文章主要介紹了ajax異步傳值及后端接收參數(shù)的多種方式小結(jié),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

異步傳值

第一種呢，也是最簡單的一種，通過get提交方式，將參數(shù)在鏈接中以問號的形式進(jìn)行傳遞

// 前臺傳值方法    
// 觸發(fā)該方法調(diào)用ajax
    function testAjax(yourData) {
        $.ajax({
            type: "get", // 以get方式發(fā)起請求
            url: "/yourUrl?yourDataName=" + yourData, // 將你的請求參數(shù)以問號拼接到url中進(jìn)行參數(shù)傳遞
            success(data) {
                // data為返回值
                // 成功后的回調(diào)方法
            }
        })
    }

// 后臺接值方法
    @RequestMapping("/yourUrl")
    @ResponseBody
// @RequestParam("yourData")是必不可少的，因為他指定了鏈接中的參數(shù)名稱
    public String yourUrl(@RequestParam("yourData") String yourData) {
        System.out.println(yourData);
        // 返回值可以自由定義
        return "SUCCESS";
    }

第二種呢，是將參數(shù)體現(xiàn)到鏈接中，在后臺通過占位進(jìn)行傳遞。

// 前臺傳值方法，其實大體與上方相同只需注意url即可
// 觸發(fā)該方法調(diào)用ajax
    function testAjax(yourData) {
        $.ajax({
            type: "get", // 以get方式發(fā)起請求
            url: "/yourUrl/"+yourData, // 將你的請求參數(shù)拼接到url中進(jìn)行參數(shù)傳遞
            success(data) {
                // data為返回值
                // 成功后的回調(diào)方法
            }
        })
    }

// 后臺接值方法
    @RequestMapping("/yourUrl/{yourDataName}")
    @ResponseBody
 // 同樣@PathVariable("yourDataName")必不可少，因為他指定鏈接中某個位置代表著名為yourDataName的變量
    public String yourUrl(@PathVariable("yourDataName") String yourData) {
        System.out.println(yourData);
        // 返回值可以自由定義
        return "SUCCESS";
    }

第三種呢，通過post提交方式將form表單中的數(shù)據(jù)序列化后傳遞到后臺

 // 前臺傳值方法
 function testAjax() {
        $.ajax({
            type: "post", // 以post方式發(fā)起請求
            url: "/yourUrl", // 你的請求鏈接
            data:$("#myForm").serialize(), // 對id為myForm的表單數(shù)據(jù)進(jìn)行序列化并傳遞到后臺
            success(data) {
                // data為返回值
                // 成功后的回調(diào)方法
            }
        })
    }

    // 后臺接值方法
 @RequestMapping("/yourUrl")
    @ResponseBody
 // 在這里我假設(shè)大家表單數(shù)據(jù)與User實體類相對應(yīng)
    public String yourUrl(User user) {
        System.out.println(user.toString());
        return "SUCCESS";
    }

第四種呢，就是Ajax異步傳值最常見的在ajax方法體中使用data進(jìn)行傳值

 // 前臺傳值方法
 function testAjax() {
        $.ajax({
            type: "post", // 以post方式發(fā)起請求
            url: "/yourUrl", // 你的請求鏈接
            data: { // 提交數(shù)據(jù)
                "username": "admin", // 前者為字段名，后者為數(shù)據(jù)
                "password": "admin"
            },
            success(data) {
                // data為返回值
                // 成功后的回調(diào)方法
            }
        })
    }

 // 后臺接值方法
 @RequestMapping("/yourUrl")
    @ResponseBody
 // 在這里我假設(shè)大家表單數(shù)據(jù)與User實體類相對應(yīng)
    public String yourUrl(@RequestParam("username") String username, @RequestParam("password") String password) {
        System.out.println("username="+username+";password="+password);
        return "SUCCESS";
    }

后臺往前臺傳值就要簡單一些，單個數(shù)據(jù)或者封裝數(shù)據(jù)可以直接使用return返回json數(shù)據(jù)給前臺，如果是多個數(shù)據(jù)，可以使用PrintWriter進(jìn)行傳值，具體操作如下

PrintWriter out = response.getWriter();
try {
    out.write("yourWillReturnData");
} catch (Exception e) {
    e.printStackTrace();
}finally{
    out.close();
}

// 無論通過那種方式，只需在前臺Ajax得success回調(diào)方法中對數(shù)據(jù)進(jìn)行處理即可,我們以user為例
success(user){
    alert("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
    // 在瀏覽器控制臺打印結(jié)果，點擊f12可以查看
    console.log("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
}

非異步方式傳值

1.與異步方式類似，使用form直接提交或者在鏈接中拼接參數(shù)即可

<!-- 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標(biāo)簽拼接參數(shù) -->
<a href="/yourUrl?youDataName=yourData" rel="external nofollow" >問號傳遞參數(shù)</a>
<a href="/yourUrl/yourData" rel="external nofollow" >拼接鏈接傳遞參數(shù)</a>

2.后臺接受參數(shù)方式不變，與異步方式完全相同。

    // 1.可以通過session進(jìn)行參數(shù)傳遞
    @RequestMapping("/yourUrl")
    public String yourUrl(HttpServletRequest request) {
        // 通過request獲取session，然后向session中放入?yún)?shù)key-value
        request.getSession().setAttribute("yourDataName", "yourData");
        // 跳轉(zhuǎn)到你的視圖
        return "/yourViews";
    }
    // 2.可以通過Model進(jìn)行參數(shù)傳遞
    @RequestMapping("/yourUrl")
    public String yourUrl(Model model) {
        // 向model中加入?yún)?shù)key-value
        model.addAttribute("yourDataName", "yourData");
        // 跳轉(zhuǎn)到你的視圖
        return "/yourViews";
    }
    // 3.同樣可以用request進(jìn)行參數(shù)傳遞
    @RequestMapping("/yourUrl")
    public String yourUrl(HttpServletRequest request) {
        // 通過request放入?yún)?shù)key-value
        request.setAttribute("yourDataName", "yourData");
        // 跳轉(zhuǎn)到你的視圖
        return "/yourViews";
    }

EL表達(dá)式怎么用？為什么EL表達(dá)式不起作用，頁面展示為${dataName}？

<!-- 我們在這里以c標(biāo)簽的for循環(huán)為例做演示 -->
<!-- 首先導(dǎo)入c標(biāo)簽 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 編寫foreach循環(huán)-->
    <c:forEach items="${userList}" var="user">
        <input type="text" name="username" value="${user.username}"/>
        <input type="text" name="password" value="${user.password}"/>
    </c:forEach>

異步請求完成后如何進(jìn)行跳轉(zhuǎn)？

1.首先要明確，如果你的視圖層全部放在WEB-INF中，那么你的視圖層是無法直接進(jìn)行跳轉(zhuǎn)的，也就是說你不能由一個jsp跳轉(zhuǎn)到另一個jsp，html同理。springboot項目也是一樣，如果你是springboot項目，推薦使用thymeleaf模版引擎。

2.如果你希望在回調(diào)成功之后進(jìn)行頁面跳轉(zhuǎn)，可以通過如下代碼實現(xiàn)：

// 前臺代碼
success(user){
    alert("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
    // 在瀏覽器控制臺打印結(jié)果，點擊f12可以查看
    console.log("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
    // 成功回調(diào)后進(jìn)行跳轉(zhuǎn)
    window.location.href="/youWantToJumpUrl" rel="external nofollow" ;
}

    // 后臺代碼
    @RequestMapping("/youWantToJumpUrl")
    public String youWantToJumpUrl() {
        // 跳轉(zhuǎn)到視圖層
        return "/youWantToJumpView";
        // 重定向 return "redirect:/youWantToJumpUrl";
    }

也就是說，如果想要跳轉(zhuǎn)頁面或者重定向到某一個方法，必須經(jīng)過一次控制層才能實現(xiàn)。