使用 jQuery 进行跨域 ajax JSONP 请求

IT技术 javascript jquery ajax json
2021-01-12 20:43:22

我想使用以下代码使用 jquery ajax 解析 JSON 数组数据:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    var result;
    function jsonparser1() {
        $.ajax({
            type: "GET",
            url: "http://10.211.2.219:8080/SampleWebService/sample.do",
            dataType: "jsonp",
            success: function (xml) {
                alert(xml.data[0].city);
                result = xml.code;
                document.myform.result1.value = result;
            },
        });
    }        
</script>    
</head>
<body>
<p id="details"></p>
<form name="myform">
    <input type="button" name="clickme" value="Click here to show the first name" onclick=jsonparser1() />
    <input type="text" name="result1" readonly="true"/>        
</form>
</body>
</html>

我的 JSON 数据是:

{"Data":   [{"Address":"chetpet","FirstName":"arulmani","Id":1,"LastName":"sathish","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"ramaraj","Id":3,"LastName":"rajesh","City":"chennai"},{"Address":"ramapuram","FirstName":"yendran","Id":3,"LastName":"sathi","City":"chennai"}],"Code":true}

但我没有得到任何输出......任何人请帮忙......

6个回答

概念解释

您是否尝试进行跨域 AJAX 调用?意思是,您的服务未托管在同一 Web 应用程序路径中?您的 Web 服务必须支持方法注入才能执行 JSONP。

您的代码看起来不错,如果您的 Web 服务和您的 Web 应用程序托管在同一域中,它应该可以工作。

当您执行$.ajaxwithdataType: 'jsonp'意味着 jQuery 实际上正在向查询 URL 添加一个新参数时。

例如,如果您的 URL 是http://10.211.2.219:8080/SampleWebService/sample.do那么 jQuery 将添加?callback={some_random_dynamically_generated_method}.

这种方法更像是一个实际附加在window对象中的代理这没什么特别的,但看起来像这样:

window.some_random_dynamically_generated_method = function(actualJsonpData) {
    //here actually has reference to the success function mentioned with $.ajax
    //so it just calls the success method like this: 
    successCallback(actualJsonData);
}

概括

您的客户端代码似乎很好。但是,您必须修改您的服务器代码,以使用与查询字符串一起传递的函数名称来包装您的 JSON 数据。IE

如果您已请求查询字符串

?callback=my_callback_method

然后,您的服务器必须响应如下包装的数据:

my_callback_method({your json serialized data});
我在这里为这个问题写了一个答案:Loading cross domain html page with jQuery AJAX最后一个,支持 https
2021-03-30 20:43:22
@AbdulMunim:是否可以在 $.ajax 的 url 属性中提及 json 文件?url 属性支持哪些文件扩展名?有填充的 js 回调返回任何东西吗?
2021-04-02 20:43:22
这就是我收到此错误的原因:Uncaught SyntaxError: Unexpected token :在控制台中?错误有一个链接,一旦我点击它就会显示 JSON 数据。
2021-04-06 20:43:22

你需要使用ajax-cross-origin插件:http : //www.ajax-cross-origin.com/

只需添加选项 crossOrigin: true

$.ajax({
    crossOrigin: true,
    url: url,
    success: function(data) {
        console.log(data);
    }
});
我添加了相同的但每次都会出现失败的错误。我正在使用 jsonp 数据类型。
2021-03-17 20:43:22
如果我做对了,它会通过第三方代理路由事物。方便,但通过服务器的流量可能会破坏最初的想法
2021-03-28 20:43:22

您的 JSON 数据包含属性Data,但您正在访问data. 区分大小写

function jsonparser1() {
    $.ajax({
        type: "GET",
        url: "http://10.211.2.219:8080/SampleWebService/sample.do",
        dataType: "json",
        success: function (xml) {
            alert(xml.Data[0].City);
            result = xml.Code;
            document.myform.result1.value = result;
        },
    });
}        

编辑城市和代码也是错误的。(感谢@Christopher Kenney)

EDIT2它也应该是 json,而不是 jsonp(至少在这种情况下)

更新根据你的最新评论,你应该阅读这个答案:https : //stackoverflow.com/a/11736771/325836 by Abdul Munim

如果您尝试直接浏览该 URL,会发生什么情况?
2021-03-16 20:43:22
您在浏览器的错误控制台中遇到了什么错误?
2021-03-20 20:43:22
如果我使用 json 而不是 jsonp 会出现错误:1)XMLHttpRequest 无法加载10.211.2.219:8080/SampleWebService/sample.doAccess-Control-Allow-Origin 不允许Origin localhost:3555sample.do 2)GET 10.211.2.219:8080/SampleWebService/sample.do未定义(未定义)
2021-03-24 20:43:22
@ChristopherKenney:如果我将数据类型设置为“json”,它会显示错误。如果我把它作为'jsonp' 就可以了。
2021-04-01 20:43:22
它显示有意外的标记:在 JSON 数据中......但它是在 JSON 中使用数组的正确方法吗???
2021-04-08 20:43:22

尝试

alert(xml.Data[0].City)

区分大小写!

你需要用 jquery json parse 来解析你的 xml...ie

  var parsed_json = $.parseJSON(xml);
那是在成功函数中吗?因为我在控制台中收到一个错误:Uncaught SyntaxError: Unexpected token :它显示错误函数警报,甚至没有命中成功函数。
2021-04-05 20:43:22