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>

结果：

原文：http://www.javashuo.com/article/p-vubahzyc-cu.html