技術文章 » 前端Ajax傳參，後臺接收引數的幾種方式

前端Ajax傳參，後臺接收引數的幾種方式

2020-09-13 10:01:38

相關說明

格式說明：
  1.引數名；
  2.引數型別；
  3.引數說明，預設值，可選值；

url
String
(預設: 當前頁地址) 傳送請求的地址。

type
String
(預設: "GET") 請求方式 ("POST" 或 "GET")， 預設為 "GET"。
注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。

timeout
Number
設定請求超時時間（毫秒）。此設定將覆蓋全域性設定。

async
Boolean
(預設: true) 預設設定下，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設定為 false。注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。

beforeSend
Function
傳送請求前可修改 XMLHttpRequest 物件的函數，如新增自定義 HTTP 頭。XMLHttpRequest 物件是唯一的引數。
function (XMLHttpRequest) { 
  this; 
}

cache
Boolean
(預設: true) jQuery 1.2 新功能，設定為 false 將不會從瀏覽器快取中載入請求資訊。

complete
Function
請求完成後回撥函數 (請求成功或失敗時均呼叫)。引數： XMLHttpRequest 物件，成功資訊字串。
function (XMLHttpRequest, textStatus) { 
}

contentType
String
(預設: "application/x-www-form-urlencoded") 傳送資訊至伺服器時內容編碼型別。預設值適合大多數應用場合。

data
Object,String
傳送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後。
檢視 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。
如果為陣列，jQuery 將自動為不同值對應同一個名稱。
如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。

dataType
String
預期伺服器返回的資料型別。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊返回 responseXML 或 responseText，並作為回撥函數引數傳遞，可用值:
"xml": 返回 XML 檔案，可用 jQuery 處理。
"html": 返回純文字 HTML 資訊；包含 script 元素。
"script": 返回純文字 JavaScript 程式碼。不會自動快取結果。
"json": 返回 JSON 資料 。
"jsonp": JSONP 格式。使用 JSONP 形式呼叫函數時，
如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回撥函數。
 
error
Function
(預設: 自動判斷 (xml 或 html)) 請求失敗時將呼叫此方法。
這個方法有三個引數：XMLHttpRequest 物件，錯誤資訊，（可能）捕獲的錯誤物件。
function (XMLHttpRequest, textStatus, errorThrown) {
   // 通常情況下textStatus和errorThown只有其中一個有值  this; 
}

global
Boolean
(預設: true) 是否觸發全域性 AJAX 事件。
設定為 false 將不會觸發全域性 AJAX 事件，如 ajaxStart 或 ajaxStop 。
可用於控制不同的Ajax事件

ifModified
Boolean
(預設: false) 僅在伺服器資料改變時獲取新資料。使用 HTTP 包 Last-Modified 頭資訊判斷。

processData
Boolean
(預設: true) 預設情況下，傳送的資料將被轉換為物件(技術上講並非字串) 以配合預設內容型別 "application/x-www-form-urlencoded"。
如果要傳送 DOM 樹資訊或其它不希望轉換的資訊，請設定為 false。

success
Function
請求成功後回撥函數。這個方法有兩個引數：伺服器返回資料，返回狀態function (data, textStatus) { 
  // data could be xmlDoc, jsonObj, html, text, etc... 
}

1.傳送get請求將引數通過？拼接在url後面

$.ajax({
        url: "/login/authenticate?name="+name+"&user="+user,    //請求的url地址  
        url: Feng.ctxPath + "/reportDay/checkMerNo?merNo=" + merNo,   //請求的地址
        cache: "false",   //設定為false將不會從瀏覽器中載入請求資訊
        async: "true",    //true所有請求均為非同步請求
        dataType: "json", //請求返回資料的格式
        type:"get",      //請求方式
        success: function(data){  //請求成功後的回撥方法
            console.log("data:" + data);
            if(data == true){

            }else{
                Feng.error("不存在該商戶號，請仔細檢查後在填寫!")
            }
        },
        error:function () {   //請求失敗後的回撥方法
            Feng.error("請求出錯!")
        }
    });

後臺接收引數

    /**
        通過@RequestParam("***")接收引數值
     */
    @RequestMapping("/yourUrl")
    @ResponseBody
    public String yourUrl(@RequestParam("merNo") String merNo) {
        System.out.println(yourData);
        // 返回值可以自由定義
        return "SUCCESS";
    }

2.將引數拼接在url中，後臺通過預留位置接收引數   /{id}

 $.ajax({
        url: Feng.ctxPath + "/reportDay/checkMerNo/" + merNo,   //請求的地址
        cache: "false",   //設定為false將不會從瀏覽器中載入請求資訊
        async: "true",    //true所有請求均為非同步請求
        dataType: "json", //請求返回資料的格式
        type:"get",      //請求方式
        success: function(data){  //請求成功後的回撥方法
            console.log("data:" + data);
            if(data == true){

            }else{
                Feng.error("不存在該商戶號，請仔細檢查後在填寫!")
            }
        },
        error:function () {   //請求失敗後的回撥方法
            Feng.error("請求出錯!")
        }
    });

後臺接收引數

    /**
        @PathVariable("yourDataName")接收
      */
    @RequestMapping("/yourUrl/{merNo}")
    @ResponseBody
    public String yourUrl(@PathVariable("merNo") String merNo) {
        System.out.println(yourData);
        // 返回值可以自由定義
        return "SUCCESS";
    }

3.通過post提交方式將form表單中的資料序列化後傳遞到後臺。

   $.ajax({
        url: Feng.ctxPath + "/reportDay/checkMerNo",   //請求的地址
        data: $("#myForm").serialize(), // 對id為myForm的表單資料進行序列化並傳遞到後臺
        cache: "false",   //設定為false將不會從瀏覽器中載入請求資訊
        async: "true",    //true所有請求均為非同步請求
        dataType: "json", //請求返回資料的格式
        type:"post",      //請求方式
        success: function(data){  //請求成功後的回撥方法
            console.log("data:" + data);
            if(data == true){

            }else{
                Feng.error("不存在該商戶號，請仔細檢查後在填寫!")
            }
        },
        error:function () {   //請求失敗後的回撥方法
            Feng.error("請求出錯!")
        }
    });

後臺接收引數

/**
  在這裡我假設大家表單資料與User實體類相對應
*/
 @RequestMapping("/yourUrl")
 @ResponseBody
 public String yourUrl(User user) {
     System.out.println(user.toString());
     return "SUCCESS";
 }

4.常見的data傳值

  $.ajax({
        url: Feng.ctxPath + "/reportDay/checkMerNo",   //請求的地址
        data: { // 提交資料
                "username": "admin", // 前者為欄位名，後者為資料
                "password": "admin"
              },
        cache: "false",   //設定為false將不會從瀏覽器中載入請求資訊
        async: "true",    //true所有請求均為非同步請求
        dataType: "json", //請求返回資料的格式
        type:"post",      //請求方式
        success: function(data){  //請求成功後的回撥方法
            console.log("data:" + data);
            if(data == true){

            }else{
                Feng.error("不存在該商戶號，請仔細檢查後在填寫!")
            }
        },
        error:function () {   //請求失敗後的回撥方法
            Feng.error("請求出錯!")
        }
    });

接收引數

   /**
      在這裡我假設大家表單資料與User實體類相對應
    */
   @RequestMapping("/yourUrl")
   @ResponseBody
   public String yourUrl(@RequestParam("username") String username,                                                    
                         @RequestParam("password") String password) {
       System.out.println("username="+username+";password="+password);
       return "SUCCESS";
   }

5.拼接data

$.ajax({
        url: Feng.ctxPath + "/reportDay/checkMerNo",   //請求的地址
        data: 'name='+name+'&user='+user,    //引數值 
        cache: "false",   //設定為false將不會從瀏覽器中載入請求資訊
        async: "true",    //true所有請求均為非同步請求
        dataType: "json", //請求返回資料的格式
        type:"get",      //請求方式
        success: function(data){  //請求成功後的回撥方法
            console.log("data:" + data);
            if(data == true){

            }else{
                Feng.error("不存在該商戶號，請仔細檢查後在填寫!")
            }
        },
        error:function () {   //請求失敗後的回撥方法
            Feng.error("請求出錯!")
        }
    });

後臺接收引數

   /**
        @RequestParam
    */
   @RequestMapping("/yourUrl")
   @ResponseBody
   public String yourUrl(@RequestParam("name") String name, @RequestParam("user") String user) {
       System.out.println("username="+username+";password="+password);
       return "SUCCESS";
   }

6.@ModelAttribute註解：使用@ModelAttribute這個方法可以直接將引數對映成pojo物件，我不加@ModelAttribute註解，直接接收pojo物件，同樣能夠接收到引數

<script type="text/javascript">
            $(function(){
                $.ajax({
                    type:"post",
                    url:"http://localhost:8080/test",
                    data:{
                        "name":"張三",
                        "phone":"10086",
                        "password":"123456"
                    },
                    async:true,
                    success:function(data){
                        console.log(data);
                    }
                });
            })
        </script>

後臺接收引數

    @RequestMapping("/test")
    @ResponseBody
    public String testUser(@ModelAttribute("TUser") TUser user){
        System.out.println(user.getName());
        System.out.println(user.getPassword());
        System.out.println(user.getPhone());
        return "ok";
    }

7.@PathVariabl

<script type="text/javascript">
            $(function(){
                $.ajax({
                    type:"post",
                    url:"http://localhost:8080/test/10086",
                    data:{
                        "name":"張三",
                        "password":"123456"
                    },
                    async:true,
                    success:function(data){
                        console.log(data);
                    }
                });
            })
        </script>

後臺接收引數

    @RequestMapping("/test/{phone}")
    @ResponseBody
    public String testUser(String name,@PathVariable String phone,String password){
        System.out.println(name);
        System.out.println(phone);
        System.out.println(password);
        return "ok";
    }

使用HttpServletRequest接收引數

    @RequestMapping("/test")
    @ResponseBody
    public String testUser(HttpServletRequest request, HttpServletResponse response){
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("phone"));
        System.out.println(request.getParameter("password"));
        return "ok";
    }

使用@RequestParam接收引數

    @RequestMapping("/test")
    @ResponseBody
    public String testUser(@RequestParam("name") String a,@RequestParam("phone") String b, String password){
        /**
         * @RequestParam() 裡邊的值必須要和前端傳遞過來的引數名字相同
         */
        System.out.println(a);
        System.out.println(b);
        System.out.println(password);
        return "ok";
    }

非非同步方式傳值
非非同步方式前臺傳遞引數
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";
   }