logo标签列表

如何使用jQuery调用带有JSON响应的ajax请求？

jqueryajaxjson
6
我无法从以下代码中打印出成功的结果，包括这一行jQuery.support.cors = true;会出现警告消息。那么我该如何避免这种情况而不失去功能呢？我的主要目标是调用返回JSON数据的REST Web服务并利用该数据。请帮我解决这个问题并提供一个可行的示例。
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<script>
    jQuery.support.cors = true;
    $.ajax ({
        url: 'http://json-cricket.appspot.com/score.json',
        datatype: "json",
        success: function (e) {
            // Success callback
            alert("sucess");
        }})
</script>
 
</body>
</html>
我认为选项是 dataType 而不是全部小写，但不确定这会有多大的区别，如果 jQuery 可以处理它或者我记错了。http://api.jquery.com/jQuery.ajax/ - martincarlin87
会发出一个警告信息。是关于跨域问题的吗？ - A. Wolff
我猜这是一个跨域的ajax请求？https://dev59.com/2mgt5IYBdhLWcg3w5har#11736771 尝试使用jsonp。 - cernunnos
5个回答
9
  1. 您可能忘记添加type，即REST操作的类型（GET或POST）。
  2. dataType 拼写错误。
  3. 您忘记添加contentType。
 $.ajax({
            type: "POST", //rest Type
            dataType: 'jsonp', //mispelled
            url: "http://json-cricket.appspot.com/score.json",
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                console.log(msg);                
            }
 });

更新： 在试图找出原因时，我认为这是理解问题的最佳答案。

假设您在域abc.com上，并且您想向域xyz.com发出请求。为此，您需要跨越域边界，这在大多数浏览器中都是禁止的。

唯一可以绕过此限制的项目是标签。当您使用脚本标记时，域限制被忽略，但在正常情况下，您无法真正处理结果，脚本只会被评估。

进入JSONP。当您向启用JSONP的服务器发出请求时，您传递一个特殊参数，告诉服务器有关您的页面的一些信息。这样，服务器能够将其响应包装到您的页面可以处理的方式中。

3
最好的选择是使用一个jsonp请求。为此，只需将 dataType 指定为 jsonp。
$.ajax({
    url: 'http://json-cricket.appspot.com/score.json',
    dataType: 'jsonp',
    success: function (data) {
        console.log(data);        
    }
});

在jsFidle上查看示例。
投了一票支持 Fiddle :) - Shankar Narayana Damodaran
0

尝试这个，它可以获得最佳结果。它在REST架构中被使用，响应速度非常快。

function CallService(sucessData) {
    $.ajax({
        // Add code for Cross Domain
        headers: getHeaders(),
        type: varType, //GET or POST or PUT or DELETE verb
        url: varUrl, // Location of the service
        data: varData, //Data sent to server
        contentType: varContentType, // content type sent to server
        dataType: varDataType, //Expected data format from server
        processdata: varProcessData, //True or False
        crossDomain: true,
        timeout: 200000,
        success: sucessData,
        error: function (xhr) {// When Service call fails
            alert("Error: " + xhr.responseText);
        }
    });
}
0

CORS（跨源资源共享）与XSS（跨站脚本攻击）不同。

$.support.cors 包含一个测试的结果，测试当前浏览器是否支持cors。更改它并不能使浏览器支持cors。

另外，您的服务器必须通过返回正确的头信息来支持 CORS。

-1
如果您正在请求跨域服务，则需要包含jQuery.support.cors = true;。正确的AJAX代码如下：
 $.ajax ({
    url: 'http://json-cricket.appspot.com/score.json',
    dataType: "json",
    contentType: "application/json",
    success: function (jsonData) {
        // Success callback
        alert("sucess");
    },
    error: function() {
        //any error to be handled
    }
 });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接