Ajax請求傳遞參數遇到的問題

時間 2019-11-19

標籤 ajax 請求傳遞參數遇到問題欄目 Ajax 简体版

原文原文鏈接

WebAPI傳遞參數遇到的問題javascript

Ajax的格式：html

    $.ajax({
        type: "get", //數據發送的方式（post 或者 get）
        url: "/admin/index", //要發送的後臺地址
        data: { val1: "1", val2: "2" }, //要發送的數據（參數）格式爲{'val1':"1","val2":"2"}
        dataType: "json", //後臺處理後返回的數據格式
        success: function(data) {//ajax請求成功後觸發的方法
            alert('請求成功');
        },
        error: function(msg) {//ajax請求失敗後觸發的方法
            alert(msg); //彈出錯誤信息
        }
    });

後臺實體類（Person）：前端

namespace WebApi.Models
{
    public class Person
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string EnglishName { get; set; }
    }
}

後臺接口：java

public class TestController : ApiController
{
    public Person GetEnglishName(int ID, string Name)
    {
        Person man = new Person();
        man.ID = ID;
        man.Name = Name;
        man.EnglishName = "Bert";
        return man;
    }
}

前端Ajax請求：jquery

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <title></title>
</head>
<body>
    <input type="submit" id="testId" /><input type="text" id="text1" />
</body>
</html>

<script type="text/javascript">
    $("#testId").click(function() {
        $.ajax({
            url: "/api/Test/GetEnglishName",
            type: "GET",
            data: { "ID": 1, "Name": "yzc" },
            success: function(data) {
                $("#text1").val(data.EnglishName);
            }
        });
    });
</script>

結果：ajax

如上，這是最普通的一次WebApi的Ajax請求，接下來咱們來說幾個比較特殊的例子。代碼修改以下：黃色熒光筆的都是改動的代碼。json

後臺接口：api

public class TestController : ApiController
{
    public Person SetEnglishName(int ID, string Name)
    {
        Person man = new Person();
        man.ID = ID;
        man.Name = Name;
        man.EnglishName = "Bert";
        return man;
    }
}

前端Ajax請求：app

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <title></title>
</head>
<body>
    <input type="submit" id="testId" /><input type="text" id="text1" />
</body>
</html>

<script type="text/javascript">
    $("#testId").click(function() {
        $.ajax({
            url: "/api/Test/SetEnglishName",
            type: "GET",
            data: { "ID": 1, "Name": "yzc" },
            success: function(data) {
                $("#text1").val(data.EnglishName);
            }
        });
    });
</script>

結果：post

結論：

咱們僅僅只是更改了接口的名稱而已，從GetEnglishName改成SetEnglishName，爲何就找不到該方法了呢？

緣由是：WebAPI對於後臺方法接口在沒有給它添加訪問方式的前提下（如：[HttpPost]），而且方法名稱開頭帶着Get的話，默認是Get請求。

全部在上面例子中，方法名既沒有標明請求方式，也不是Get開頭，它天然找不到能夠容許訪問的方法了，建議：無論是什麼類型的請求都在方法上設置訪問類型。

post請求傳遞一個參數的時候，data並非傳的鍵/值對形式，而是data:{"":"yzc"},記住這種特殊狀況，否則後臺是獲取不到前端傳過去的值得，至於緣由是：Web API 要求請求傳遞的 [FromBody] 參數，是有一個特定的格式，才能被正確的獲取到。

post傳遞多個參數的時候 (被標記[FromBody]的參數只能出現一次，被標記爲[FromUri]的參數能夠出現屢次，若是被標記爲[FromUri]的參數是簡單參數，該標記能夠去掉。)

請求的時候

一、data：JSON.stringify(x)和contentType: "application/json"一塊兒使用，或者

二、data：{爲鍵值對}，而且不能加contentType: "application/json"，這兩種狀況後臺[FromBody]參數都能獲取到值。（經測試過，當出現交叉狀況，如:data裏面爲鍵值對，且加了contentType: "application/json"，後臺將不能訪問數據）

當post請求的參數多的時候，就須要封裝在一個類裏面，這樣後臺也須要建立臨時類來接收，而dynamic可讓咱們省掉許多類。然而前端Ajax請求參數的配置目前本身試過的只有data：JSON.stringify(x)和contentType:"application/json"一塊兒後臺才能拿到數據。

後臺接口：

public class TestController : ApiController
{
    [HttpPost]
    public Person GetEnglishName(dynamic per)
    {
        Person man = new Person();
        man.ID = per.ID;
        man.Name = per.Name;
        man.EnglishName = "Bert";
        return man;
    }
}

前端Ajax請求：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    <input type="submit" id="testId" /><input type="text" id="text1" />
</body>
</html>

<script type="text/javascript">
    $("#testId").click(function() {
        $.ajax({
            url: "/api/Test/GetEnglishName",
 type: "POST", contentType: "application/json", data: JSON.stringify({ "ID": 1, "Name": "yzc" }),
            success: function(data) {
                $("#text1").val(data.EnglishName);
            }
        });
    });
</script>