如何从Ajax Post调用跨域WebAPI调用？

-2

我可以拨打WebAPI，但是当我尝试使用Ajax至POST的方法发布JSON数据时，我得到的值为null。我在这里做错了什么？如何从Ajax Post调用跨域WebAPI调用？

我有以下的WebAPI

代码代码为MyData class

public class MyData 
{ 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
}

代码Ajax呼叫

function PostData() 
{ 
    var _data = JSON.stringify({ value : { FirstName: "ABC", LastName: "XYZ" } }); 
    $.ajax({ 
     url: "http://localhost:57786/api/values", 
     type: "POST", 
     contentType: "application/json", 
     data: _data, 
     success: function (data) { 
      alert("Success"); 
     }, 
     error: function (error) { 
      alert("Error"); 
     } 
    }); 
}

来源

2017-08-11 user3881465

这与跨域调用有什么关系？ – Marco

因为相同的代码适用于相同的域名调用 – user3881465

该信息对您的问题有用 – Marco

该问题的解决方案是Parameter Binding的概念。

我不需要指定我的对象value，因为WebAPI中最多允许有一个[FromBody]属性。更多解释阅读链接

Parameter Binding

Parameter Binding in ASP.NET Web API

WebAPI's POST将接受来自身体只有一个复杂类型的参数。在我的情况下，MyData是一个复杂的类型，WebAPI's POST方法将期望来自正文的复杂类型的属性。这意味着我只需要通过像这样的复杂类型的属性

{ FirstName: "ABC", LastName: "XYZ" }。

function PostData() 
{ 
    var _data = JSON.stringify({ FirstName: "ABC", LastName: "XYZ" }); 
    $.ajax({ 
     url: "http://localhost:57786/api/values", 
     type: "POST", 
     contentType: "application/json", 
     data: _data, 
     success: function (data) { 
      alert("Success"); 
     }, 
     error: function (error) { 
      alert("Error"); 
     } 
    }); 
}

来源

2017-08-12 13:51:06 user3881465

的jQuery.ajax()方法不知道所谓的 “ContentType的” 财产资本C.转换为contentType

总而言之，这应该是这样的：

//With or without value property 
var _data = JSON.stringify({ FirstName: "ABC", LastName: "XYZ" }); 
$.ajax({ 
    url: "http://localhost:57786/api/values", 
    type: "POST", 
    contentType: "application/json", //lower case 'c'! 
    data: _data, 
    success: function (data) { 
     alert("Success"); 
    }, 
    error: function (error) { 
     alert("Error"); 
    } 
});

如果你想收到一个错误，如果你的模型是无效的，你需要在你的控制器可以这样做：

public HttpResponseMessage Post([FromBody]MyData value) 
{ 
    if(value.FirstName != null && value.LastName != null) 
    { 
     return Request.CreateResponse(HttpStatusCode.OK); 
    } 
    return Request.CreateResponse(HttpStatusCode.BadRequest, "Something went wrong"); 
}

现在如果将无效的json发布到模型联编程序中，您将收到错误的请求错误消息。

来源

2017-08-11 20:46:33 Marco

感谢您的回答。如果需要发布2个自定义对象呢？ – user3881465

每个请求只能发布一个对象。所以一个视图模型是要走的路。基本上是一个包装2个或更多其他类的类。只是谷歌它。 – Marco

啊我明白了。但是我们可以在MVC控制器动作中发布'JSON.stringify（{value：{FirstName：“ABC”，LastName：“XYZ”}}）''。所以如果我在WebAPI中需要同样的功能，那么我应该在WebAPI中使用MVC控制器吗？它会起作用吗？ – user3881465

如何从Ajax Post调用跨域WebAPI调用？

回答

相关问题