在ASP.NET MVC 5中使用jquery AJAX调用Web API获取错误未捕获语法错误：无效或意外标记_Jquery_Asp.net_Ajax_Model View Controller

在ASP.NET MVC 5中使用jquery AJAX调用Web API获取错误未捕获语法错误：无效或意外标记

jquery asp.net ajax model-view-controller

在ASP.NET MVC 5中使用jquery AJAX调用Web API获取错误未捕获语法错误：无效或意外标记,jquery,asp.net,ajax,model-view-controller,Jquery,Asp.net,Ajax,Model View Controller,ASP.NET MVC 5中使用JQuery AJAX的Web API获取错误“无效或意外令牌” 我已经用MVC创建了一个Web API项目。其中包含具有操作方法索引的HomeController public ActionResult Index() { return View(); } 对于上述操作方法，我想在javascript警报消息中显示来自ajax调用的员工详细信息，如下所示 @{ Layout = null; } <script src="~/Script/j

ASP.NET MVC 5中使用JQuery AJAX的Web API获取错误“无效或意外令牌”

我已经用MVC创建了一个Web API项目。其中包含具有操作方法索引的HomeController

public ActionResult Index()
{
    return View();
}

对于上述操作方法，我想在javascript警报消息中显示来自ajax调用的员工详细信息，如下所示

@{ 
Layout = null; 
} 
<script src="~/Script/jquery-1.10.2.min.js"></script>  
<html> 
<head> 
<meta name="viewport" content="width=device-width" /> 
<title>Index<title> 
<head> 
<body> 
    <div><h2>You Are On View</h2><div> 
</body> 
<script> 

$(document).ready(function () { 
    $.ajax({ 
        type: 'GET', 
        url: "http://localhost:802/api/Employee/GetEmployee?Id=101", 
        contentType: "application/json; charset=utf-8", 
        dataType: "jsonp", 
        success: function (data) { 
            alert(data); 
        }, 
        failure: function (data) { 
            alert("Failure: "+ data); 
        }, 
        error: function (data) { 
            alert("Error: "+ data); 
        } 
    }); 
});
</script>
</html>

我在控制台中收到类似“未捕获的SyntaxError:无效或意外的令牌”的错误

如果我点击控制台中的错误，那么我得到的结果是

{ "EmpId": "101","Name": "Rupesh" }

我所尝试的：

我尝试了以下解决方案 (一)

2）还添加了标题&将数据类型从json更改为jsonp

dataType: "jsonp",
headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
        },

3）我也试过了

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:802/api/Employee/GetEmployee?Id=101", true);
xhr.onreadystatechange = function()
{
    if (xhr.readyState == 4)
    {
        alert(xhr);
    }
}
xhr.send();

4）还添加了如下标题：

"Access-Control-Allow-Headers":"Content-Type",
"Access-Control-Allow-Methods":"GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Origin": "*",
"cache-control":"no-cache"

在

$.ajax

调用中使用此选项

dataType: "jsonp"

这说明此ajax调用的响应来自跨域jsonp调用。jsonp通常用于发出跨域ajax请求。在

$.ajax

方法的情况下，它将向服务器发送回调方法的查询字符串，并且服务器希望将结果封装在该字符串中（类似于方法调用）。使用$.ajax，您可以在

jsonp

选项参数中提供自定义的本地js方法作为回调

当返回

$.ajax

jsonp调用的结果时，jQuery将尝试解析它，并期望结果是一个字符串，其中结果被包装在回调方法名称中。但是，由于服务器返回原始json（没有任何回调前缀），因此代码失败

理想情况下，如果要调用同一应用程序的web api端点，则不需要jsonp类型。此外，由于您没有在请求正文中发送任何数据，因此无需指定内容类型

$(document).ready(function() {
    var url="http://localhost:802/api/Employee/GetEmployee?Id=101";
    $.ajax({
        type: 'GET',
        url: url,
        success: function(data) {
            console.log(data);
        },
        failure: function(data) {
            alert("Failure: " + data);
        },
        error: function(data) {
            alert("Error: " + data);
        }
    });
});

您也可以考虑使用<代码> URL .RoutURL< /COD>帮助器方法来生成指向端点的路由URL（该方法在Rasor文件中工作）

问题在于您返回的是JSON，而不是JSONP。在

$.ajax

调用中更改

数据类型

属性。如果您提出本地请求，也不需要CORS。我建议对AJAX请求也使用相对路径

$(document).ready(function() {
    var url="http://localhost:802/api/Employee/GetEmployee?Id=101";
    $.ajax({
        type: 'GET',
        url: url,
        success: function(data) {
            console.log(data);
        },
        failure: function(data) {
            alert("Failure: " + data);
        },
        error: function(data) {
            alert("Error: " + data);
        }
    });
});

var employeeUrl = "@Url.RouteUrl("DefaultApi",
                                new { httproute = "", controller = "Employee"})";
var url = employeeUrl + "/101";
//use url  for your call