请使用jQuery跨域AJAX JSONP请求 [英] Make cross-domain ajax JSONP request with jQuery

查看:209
本文介绍了请使用jQuery跨域AJAX JSONP请求的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想解析JSON数组数据与jQuery阿贾克斯与以下code:

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.

您code似乎不错,它应该工作,如果你的Web服务和Web应用程序在同一个域中托管。

Your code seems fine and it should work if your web services and your web application hosted in the same domain.

当你做了 $ AJAX 数据类型:'JSONP这意味着jQuery是实际添加了新的参数的查询网址。

When you do a $.ajax with dataType: 'jsonp' meaning that jQuery is actually adding a new parameter to the query URL.

例如,如果您的网址是 http://10.211.2.219:8080/SampleWebService/sample.do 则jQuery将添加?回调= {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}.

这个方法是比较厚道的代理实际上附着在窗口对象。这是没有什么特别,但确实是这个样子:

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);
}

摘要

您的客户端code似乎就好了。但是,你必须修改你的服务器 - code与与查询字符串传递一个函数名称包装你的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.

如果您已reqested与查询字符串

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆