使用jQuery创建跨域ajax JSONP请求

pra*_*u R 38 javascript ajax jquery json

我想用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>
Run Code Online (Sandbox Code Playgroud)

我的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}
Run Code Online (Sandbox Code Playgroud)

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

Abd*_*nim 89

概念解释

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

您的代码似乎很好,如果您的Web服务和Web应用程序托管在同一个域中,它应该可以正常工作.

当你做一个$.ajaxdataType: 'jsonp'这意味着jQuery是实际添加一个新的参数的查询网址.

例如,如果您的URL是http://10.211.2.219:8080/SampleWebService/sample.dojQuery将添加?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);
}
Run Code Online (Sandbox Code Playgroud)

摘要

您的客户端代码似乎没问题.但是,您必须修改服务器代码以使用通过查询字符串传递的函数名来包装JSON数据.即

如果您已经重新使用查询字符串

?callback=my_callback_method
Run Code Online (Sandbox Code Playgroud)

那么,你的服务器必须响应这样包装的数据:

my_callback_method({your json serialized data});
Run Code Online (Sandbox Code Playgroud)


小智 8

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

只需添加选项crossOrigin:true

$.ajax({
    crossOrigin: true,
    url: url,
    success: function(data) {
        console.log(data);
    }
});
Run Code Online (Sandbox Code Playgroud)