javascript - 使用 jQuery 进行跨域 ajax JSONP 请求

我想用 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}

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

最佳答案

概念解释

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

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

当您使用 dataType: 'jsonp' 执行 $.ajax 时,意味着 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 数据。即

如果您已请求查询字符串

?callback=my_callback_method

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

my_callback_method({your json serialized data});

https://stackoverflow.com/questions/11736431/

相关文章:

django - 在 JSON 中返回纯 Django 表单错误

c# - 返回 Json,但它包含反斜杠 "\",我不想要

javascript - 将 typescript 对象转换为 json 字符串

php - PDOStatement 到 JSON

javascript - 使用 Javascript 更新 JSON 对象

java - 想要隐藏由 Jackson 映射到 JSON 的对象的某些字段

ruby-on-rails - 我应该如何格式化对我的 rails 应用程序的 JSON POST

ios - 如何使用 SwiftyJSON 解析字符串数组?

ios - Twitter api 文本字段值被截断

jquery - 如何在 jQuery 中遍历这个 JSON 对象?