使用 web api 在 mvc 中调用 ajax答案

【问题标题】：ajax call in mvc using web api使用 web api 在 mvc 中调用 ajax
【发布时间】：2016-02-08 08:58:38
【问题描述】：

我写了简单的 webapi 方法。我正在尝试使用 ajax 调用在 mvc 中访问该方法。我在 browser 和 fiddler 中得到输出。但它在 cshtml 页面中不起作用。如果我必须添加一些内容，请告诉我。请看这个..

 function validate() {
            alert("came");
            $.ajax({
                url: 'http://localhost:54544/api/home/getname/',
                method: 'GET',
                contentType: 'application/form-url-encoded',
                
                success: function ()
                {
                    alert("success");
                },
                error: function (ex) {
                    alert(ex.responseText);
                }
            });

        }

在这里查看html代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>View</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
        // beforeSend: function(xhr, settings) { xhr.setRequestBody('Authorization','Bearer ' + token); } ,

        $(document).ready(function () {

            alert("came");

            $.ajax({
                url: "http://localhost:54544/api/home/getname/",
                type: "Get",
                success: function (data) {

                    alert("test came");

                },
                error: function (msg) { alert("error"); alert(msg); }
            });
        });

    </script>


</head>
<body>
    <div>

        <table>
            <tbody>
                <tr>
                    <td><input type="button" value="Submit" onclick="validate()" name="Submit" /> </td>
                </tr>
            </tbody>


        </table>

    </div>
</body>
</html>

how to add request body parameters in ajax request

【问题讨论】：

我尝试删除内容类型。但它不起作用。
您的浏览器控制台有错误吗？发布您完整的cshtml 和Layout 页面，您是否将其包装在部分中？因为在默认模板下，如果您立即在 cshtml 中调用 <script></script> 而不将其包装在部分中，它将在 jquery.js 之前调用，并且会导致错误，因为 jquery.js 在 RenderBody() 之后被调用Layout 页面
添加了 cshtml。请检查一次并在控制台中出错：XMLHttpRequest 无法加载 localhost:54544/api/home/getname。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'localhost:57842'。

标签： jquery ajax asp.net-mvc asp.net-mvc-4 model-view-controller

【解决方案1】：

您似乎违反了same origin policy 限制，试图对另一个域进行 AJAX 调用。为此，您可能需要在 Web API 中启用 CORS。如果您使用的是 ASP.NET Web API，您可以查看following tutorial，它说明了如何做到这一点。

基本上你可以安装Microsoft.AspNet.WebApi.Cors NuGet：

Install-Package Microsoft.AspNet.WebApi.Cors

并在您的引导程序中启用 CORS：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();
        ...
    }
}

最后用 [EnableCors] 属性装饰你的 API 控制器：

[EnableCors(origins: "http://www.example.com", headers: "*", methods: "*")]
public class ItemsController : ApiController
{
    public HttpResponseMessage Get() { ... }
}

【讨论】：

感谢您的回复。我懂了。还有一个疑问，我附上了一张图片link请告诉我如何在ajax调用中添加req body参数
您似乎在请求中传递了错误的内容类型标头：application/form-url-encoded。正确的内容类型是application/x-www-form-urlencoded，因此在 Fiddler 中发出 HTTP 请求时，请确保遵守标准编码标头。