• Ajax请求传递参数遇到的问题


    WebAPI传递参数遇到的问题

    Ajax的格式:

        $.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; }
        }
    }

    后台接口:

    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请求:

    <!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>

    结果:

    如上,这是最普通的一次WebApi的Ajax请求,接下来我们来讲几个比较特殊的例子。代码修改如下:黄色荧光笔的都是改动的代码。

    后台接口:

    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请求:

    <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>

    结果:

    结论:

    我们仅仅只是更改了接口的名称而已,从GetEnglishName改为SetEnglishName,为什么就找不到该方法了呢?

    原因是:WebAPI对于后台方法接口在没有给它添加访问方式的前提下(如:[HttpPost]),并且方法名称开头带着Get的话,默认是Get请求。

    所有在上面例子中,方法名既没有标明请求方式,也不是Get开头,它自然找不到可以允许访问的方法了,建议:不管是什么类型的请求都在方法上设置访问类型。

    post请求传递一个参数的时候,data并不是传的键/值对形式,而是data:{"":"yzc"},记住这种特殊情况,不然后台是获取不到前端传过去的值得,至于原因是:Web API 要求请求传递的 [FromBody] 参数,是有一个特定的格式,才能被正确的获取到。

    post传递多个参数的时候 (被标记[FromBody]的参数只能出现一次,被标记为[FromUri]的参数可以出现多次,如果被标记为[FromUri]的参数是简单参数,该标记可以去掉。)

    请求的时候

    1、data:JSON.stringify(x)和contentType: "application/json"一起使用,或者

    2、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>

    结果:


    原文:https://www.cnblogs.com/yzcStudy/p/5767109.html

  • 相关阅读:
    设计模式之观察者模式
    设计模式之建造者模式
    设计模式之外观模式
    设计模式之模板方法模式
    设计模式之原型模式
    自己动手写计算器v1.1
    自己动手写计算器v1.0
    Guid的使用
    设计模式学习---代理类
    StringBuilder的使用
  • 原文地址:https://www.cnblogs.com/cang12138/p/5768929.html
Copyright © 2020-2023  润新知