使用 jQuery 进行跨域 ajax JSONP 请求 [英] Make cross-domain ajax JSONP request with jQuery
问题描述
我想用 jquery ajax 解析 JSON 数组数据，代码如下:
I would like to parse JSON array data with jquery ajax with the following code:
<!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 数据是:
My JSON data is:
{"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}
但是我没有得到任何输出...任何人请帮忙...
But i am not getting any output...anybody please help out...
推荐答案
概念解释
您是否尝试进行跨域 AJAX 调用?意思是，您的服务未托管在同一 Web 应用程序路径中?您的 Web 服务必须支持方法注入才能执行 JSONP.
Concept explained
Are you trying do a cross-domain AJAX call? Meaning, your service is not hosted in your same web application path? Your web-service must support method injection in order to do JSONP.
您的代码看起来不错，如果您的网络服务和您的网络应用程序托管在同一域中，它应该可以正常工作.
Your code seems fine and it should work if your web services and your web application hosted in the same domain.
当您使用 dataType: 'jsonp' 执行 $.ajax 时，意味着 jQuery 实际上正在向查询 URL 添加一个新参数.
When you do a $.ajax with dataType: 'jsonp' meaning that jQuery is actually adding a new parameter to the query URL.
例如，如果您的 URL 是 http://10.211.2.219:8080/SampleWebService/sample.do，那么 jQuery 将添加 ?callback={some_random_dynamically_generated_method}.
For instance, if your URL is http://10.211.2.219:8080/SampleWebService/sample.do then jQuery will add ?callback={some_random_dynamically_generated_method}.
这个方法更像是一个实际附加在 window 对象中的代理.这没什么特别的，但看起来像这样:
This method is more kind of a proxy actually attached in window object. This is nothing specific but does look something like this:
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 数据.即
Your client code seems just fine. However, you have to modify your server-code to wrap your JSON data with a function name that passed with query string. i.e.
如果您已使用查询字符串进行请求
If you have reqested with query string
?callback=my_callback_method
然后，您的服务器必须响应如下包装的数据:
then, your server must response data wrapped like this:
my_callback_method({your json serialized data});
这篇关于使用 jQuery 进行跨域 ajax JSONP 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
