Web Api(4)

参考原文链接https://www.cnblogs.com/JamelAr/，本文大部分内容是根据这位博主进行实验测试的，非常感谢分享，另外也参考了https://www.cnblogs.com/vichin/p/11928889.html。希望大家一同进步。

这一篇将使用Web Api和AJAX进行数据交互的记录，通过GET和POST请求。

本次使用的是VS2017+.NET CORE 2.1+AJAX

在实现本次测试之前，要先解决跨域问题和阐述一些概念。

跨域问题，在AJAX请求的时候无法访问，错误如下图。跨域问题具体的可以百度了解一下。

 解决方案如下：

1.在ConfigureServices中添加服务

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
            
 services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

services.AddCors(options => { options.AddPolicy("CorsPolicy", builder => builder.SetIsOriginAllowed((host) => true).AllowAnyMethod().AllowAnyHeader().AllowCredentials()); });

 }

2.在Configure中添加中间件。

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseCors("CorsPolicy");//必须位于UseMVC之前
            app.UseMvc();
        }

这样就可以跨域访问了。

下面先对Get请求进行测试。

Get请求的实质是Url字符串的拼接。把传输的数据放在url地址中。

 例如，上图中的数据就是放在url上。

1.Get请求基本类型 (参数的名字要匹配对应)

    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {[Route("Demo")]//这里我自己定义了路由
        [HttpGet]
        public string Get(int id, string name)
        {
            return "这是尝试Get请求";
        }
}

     $.ajax({
            type: "Get",
            url: "http://localhost:12650/api/values/Demo",
            data: { id: 1, name: "Jim"},
            success: function (res) {
                alert(res);
            },
            error: function (msg) {
                alert(msg.responseText);
            }
        });

可以启动Web Api并打个断点进行查看。

 可以看到AJAX传过来的值接收到了，这边返回一个字符串。

 这样就完成了一次基本类型参数的请求。

2.Get不支持实体类型，刚才说了Get是字符串的拼接，所以传输的是字符串。当然了有方法可以使用[FromUri]，但我觉得不太好，所以这种写法我选择不写了。

3.我们可以通过序列化和反序列化来传送数据。

我所理解的序列化和反序列化-> 序列化就是将对象Object变成Json格式，反序列化就是将得到的Json变成对象。(Json本身是字符串)

$.ajax({
            type: "Get",
            contentType: "application/json",
            url: "http://localhost:12650/api/values/Demo",
           data:{ strDemo: JSON.stringify({ “id”: 1, “name”: "Jim" })},//用序列化的时候将参数加上引号
            success: function (res) {
                alert(res);
            },
            error: function (msg) {
                alert(msg.responseText);
            }
        });

 [Route("Demo")]
        [HttpGet]
        public string Get(string strDemo)
        {
            Person one = Newtonsoft.Json.JsonConvert.DeserializeObject<Person>(strDemo);
            return one.ID;
        }

依然打个断点看看。

 反序列化后得到对象。

下图出自https://www.cnblogs.com/vichin/p/11928889.html 在本文开头已经提及。讲的非常好 所以直接引用，在此说明出处。

POST请求

Post参数传递本身是在Request-Body内传递，而Get参数传递本质是url拼接；

1.POST请求 单个基本参数的传值。

 $.ajax({
            type: "post",
            url: "http://localhost:12650/api/values/Demo",
            data:{ "":"JACK"},//post请求,只有值没有键
            success: function (res) {
                alert(res);
            },
            error: function (msg) {
                alert(msg.responseText);
            }
        });

[Route("Demo")]
        [HttpPost]
        public string Test([FromForm] string strDemo)
        {
            return "1111";
        }

后台代码我尝试使用了FromBody但始终得不到值，大部分的博主也是使用的FromBody，都可以获取到。哎，这一点没有太搞懂为啥。后来按照上面的FromForm我可以成功的接到值。

程序打个断点看一下.

这个问题，目前还不知道原因。值确实通过FromForm取到了。

2.多个基础类型参数的传值。

多个基础类型参数的值，不能说在每次参数前面添加[FromBody]或者[FromForm]，因为源特性无法绑定，推理会失败，它不知道如何对应。

虽然说使用实体类去接收是可以，但是如果每次来不同的基础类型参数都要创建一个相应的实体类，那岂不是很麻烦，所以使用dynamic是非常不错的选择。

 $.ajax({
            type: "post",
            contentType: "application/json",//内容格式为JSon
            url: "http://localhost:12650/api/values/Demo",
            data: JSON.stringify({ "id": 1, "name": "Jim" }),
            success: function (res) {
                alert(res);
            },
            error: function (msg) {
                alert(msg.responseText);
            }
        });

[Route("Demo")]
        [HttpPost]
        public string Test(dynamic obj)
        {
            var strid = Convert.ToString(obj.id);
            var strName = Convert.ToString(obj.name);
            return "11";
        }

程序打个断点看一下.

 属性名字必须和传过来的形参名字相匹配，相同，否则无法收到值。

这样通过JSON字符串的传值方式更加友好，符合键值对，所以不管一个还是多个基础类型都可以使用该方法。

3.POST请求 实体作为参数。

将实体的JSON对象发送给后台，理论上也可以成功接收的，有博主实现了，可我没有试出来= =，所以将实体作为算数我使用如下方法。

JS代码和上面多个基本类型传参相同不在贴代码了= =

程序打个断点看一下.

 尝试成功。

4.POST请求 实体和基础类型作为参数。

$.ajax({
            type: "post",
            contentType: "application/json",
            url: "http://localhost:12650/api/values/Demo",
            data: JSON.stringify({"PHONE":"123456789","Demo":{ "ID": "1", "NAME": "Jim" }}),
            success: function (res) {
                alert(res);
            },
            error: function (msg) {
                alert(msg.responseText);
            }
        });

打个断点看看。

 尝试成功。

5.POST请求实体集合

var arr=[
            { "ID": "1", "NAME": "Jim" },
            { "ID": "2", "NAME": "JACK" },
            { "ID": "3", "NAME": "Deer" }
        ];
        $.ajax({
            type: "post",
            contentType: "application/json",
            url: "http://localhost:12650/api/values/Demo",
            data: JSON.stringify(arr),
            success: function (res) {
                alert(res);
            },
            error: function (msg) {
                alert(msg.responseText);
            }
        });

打个断点

成功获取。

PUT 和DELETE不在赘述感觉差不多。

如果不是AJAX请求，而是后台Http请求用如下方法。

public void TestReques()
　　　　{
    　　　　 //请求路径
            string url = "http://localhost:27221/api/Charging/SaveData";

            //定义request并设置request的路径
            WebRequest request = WebRequest.Create(url);
            request.Method = "post";

            //初始化request参数
            string postData = "{ ID: "1", NAME: "Jim", CREATETIME: "1988-09-11" }";

            //设置参数的编码格式，解决中文乱码
            byte[] byteArray = Encoding.UTF8.GetBytes(postData);

            //设置request的MIME类型及内容长度
            request.ContentType = "application/json";
            request.ContentLength = byteArray.Length;

            //打开request字符流
            Stream dataStream = request.GetRequestStream();
            dataStream.Write(byteArray, 0, byteArray.Length);
            dataStream.Close();

            //定义response为前面的request响应
            WebResponse response = request.GetResponse();

            //获取相应的状态代码
            Console.WriteLine(((HttpWebResponse)response).StatusDescription);

            //定义response字符流
            dataStream = response.GetResponseStream();
            StreamReader reader = new StreamReader(dataStream);
            string responseFromServer = reader.ReadToEnd();//读取所有
            Console.WriteLine(responseFromServer);
　　　　}

最后总结一下，纯个人观点,在本次测试中很多应该出现的效果并没有出现，感觉也是怪怪的，原理也不是很清楚，但通过某种方法总算也是能够获取到所需要的值了。在Get请求中基本类型可以直接通过JSON键值对即JSON对象的形式发送，这个形式和发送给一般处理程序的data格式一模一样。也可以通过序列化和反序列化来实现传送，值得注意的是contentType:'application/json',当我们使用了这句话。那么发送给后台的数据必须是以JSON字符串的形式，即序列化之后的结果。所以这句话搭配JSON.Stringify()使用。本次的Web api测试让我对JSON有了更加清楚的了解。POST请求发送给后台也基本都是JSON字符串形式，FromBody我觉得这个参数源特性会自动反序列化，个人观点= =。最后FromBody特性接收传送过来的复杂类型只能是一个，如果是多个会推测错误，将无法得到数据。特性源HTTPGET,HTTPPOST等最好加上。最后，再次感谢本文开头两位博主的原文。

PS：post 直接用string传值 使用无Json格式 也可以