无法使用来自html5的Jquery将数据发布到WebApi

时间:2015-11-03 12:13:10

标签: c# jquery ajax html5 asp.net-web-api

我有一个问题是在html页面中使用Jquery ajax将数据发布到WebaPi控制器..当我通过fiddler进行测试时它已经被认可且工作正常,但是当我尝试使用Ajax时它只给出了错误..

这是我的示例代码..

var bookData = {
                "CurrentCompany": "BizSight Sample Product Company",
                "CompanyName": CompanyName,
                "LegalName": "Biztech",
                "Address1": Address1,
                "Address2": Address2,
                "City": City,
                "State": State,
                "Phone": Phone,
                "ZipCode": ZipCode,
                "Fax": Fax,
                "Email": Email,
                "Website": Website,
                "CountryID": 1,
                "federalTaxID": 1,
                "CurrentUser": CurrentUser,
                "BusinessType": BusinessType,
                "CurrentFiscalYear": Jsondate
            };
            $.ajax({
                type: "POST",
                cache: false,
                url: "http://77b2130d5c3446eea4e4210c51529230.cloudapp.net:8080/Create/",
                data: JSON.stringify(bookData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (data, status, jqXHR) {
                        var result = JSON.stringify(data);
                    $("#loading").show();
                    alert("success..." + result);
                },
                error: function (xhr) {
                    $("#loading").show();
                    alert("Test3:" + xhr.statusText);
                }
            });

当我从html发布数据并检查fiddler时,它会给出如下图像

的消息

enter image description here 我在这段代码中遗漏了什么..?小提琴它自己它的工作,但frmo html页面不工作..你能帮我解决和实现这个

我的Api课程`

public class CreateController : ApiController
{
    public static string CompanyName = " ";
    public static string con;
    public static string sqlConnection;
    public static string DatabaseName;
    string TrustedConnection = "Yes";
    string DBServer = " ";
    string FilePath = null;
    string testFirstline = " ";
    //clsLog objLog = new clsLog();
    bool isSuccess = false;




    public string Post(DatabaseCls cls)
    {
        string ReturnMessage = "Success";

        // ReturnMessage = "Hello  " + id + "_" + parameter1 + "_" + parameter2 + "_" + parameter3 + "_" + parameter4 + "_" + parameter5 + "_" + parameter6 + "_" + parameter7 + "_" + parameter8 + "_" + parameter9 + "_" + parameter10 + "_" + parameter11 + "_" + parameter12 + "_" + parameter13 + "_" + parameter14 + "_" + parameter15;
      return ReturnMessage;
    }}

由于 Victor .A

1 个答案:

答案 0 :(得分:1)

您看到的OPTIONS错误是因为CORS。您需要将此添加到Startup.cs中的WebAPI以允许跨站点请求。

public void Configuration(IAppBuilder app)
{
    app.UseCors(CorsOptions.AllowAll);

    var formatters = configuration.Formatters;

    //-- Disable XML support
    formatters.XmlFormatter.SupportedMediaTypes.Clear();

    var jsonFormatter = formatters.JsonFormatter;
    jsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json-patch+json"));
    jsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;
    jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
    jsonFormatter.SerializerSettings.NullValueHandling = NullValueHandling.Ignore;
    jsonFormatter.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;
}

(编辑,建议)

[RoutePrefix("api")]
public class CreateController : ApiController
{
    [HttpPost, Route("create")]
    public IHttpActionResult Post([FromBody]DatabaseCls cls)
    {
        try
        {
             return Ok(new { success = true });
        }
        catch
        {
             return InternalServerError();
        }
    }
}

$.ajax({
  type: "POST",
  cache: false,
  url: "http://77b2130d5c3446eea4e4210c51529230.cloudapp.net:8080/api/Create", //note the additional "api" in url
  data: JSON.stringify(bookData),
  dataType: "json",
  success: function (data, status, jqXHR) {
       var result = JSON.stringify(data);
       $("#loading").show();
       alert("success..." + result);
   },
   error: function (xhr) {
       $("#loading").show();
       alert("Test3:" + xhr.statusText);
   }
});