在 ASP.NET MVC 5 中使用 jquery AJAX 调用 Web API 得到错误 Uncaught SyntaxError: Invalid or unexpected token答案

【问题标题】：Call Web API using jquery AJAX in ASP.NET MVC 5 getting error Uncaught SyntaxError: Invalid or unexpected token在 ASP.NET MVC 5 中使用 jquery AJAX 调用 Web API 得到错误 Uncaught SyntaxError: Invalid or unexpected token
【发布时间】：2018-05-15 12:42:42
【问题描述】：

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

我已经使用 MVC 创建了一个 Web API 项目。其中包含具有 Action 方法索引的 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>

我还创建了一个如下的 api 控制器，它将返回员工详细信息

public class EmployeeController : ApiController  
{  
    public Employee GetEmployee(int Id)  
    {  
        Employee objEmp = new Employee();  
        objEmp = ; // get data from service   
        return objEmp;  
    }  
}

我在控制台中收到类似“Uncaught SyntaxError: Invalid or unexpected token”的错误。

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

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

我尝试过的：

我尝试了以下解决方案 1)http://www.c-sharpcorner.com/article/call-web-api-using-jquery-ajax-in-asp-net-core/

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"

【问题讨论】：

问题是因为您返回的是 JSON，而不是 JSONP。更改 $.ajax 调用中的 dataType 属性。如果您提出本地请求，也不需要 CORS。我建议也为您的 AJAX 请求使用相对路径

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

【解决方案1】：

$.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.RouteUrl 辅助方法来生成到您的端点的路由 url（该方法适用于 razor 文件）

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

【讨论】：