当前位置: 首页 > 面试题库 >

使用jQuery进行跨域Ajax JSONP请求

常翰
2023-03-14
问题内容

我想用以下代码用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应用程序路径中托管吗?您的Web服务必须支持方法注入才能执行JSONP。

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

当您执行时$.ajaxdataType: '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数据。即

如果您要求查询字符串

?callback=my_callback_method

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

my_callback_method({your json serialized data});


 类似资料:
  • 问题内容: 我正在尝试向不受控制的域上的API发出一个简单的JSON获取请求。 我的代码很简单: 但这是跨域请求,因此我在Chrome控制台中收到此错误: 当我尝试添加参数时,控制台将返回此错误: 未捕获到的SyntaxError:意外令牌: 但是,当我检查Chrome中的“网络”标签时,我看到“标题”下的状态代码为200 OK,实际上我可以在“响应”标签中看到完整的响应,但控制台仍显示“意外令牌

  • 问题内容: 帮助,如果您可以- 情况: http://foobar.com包含一个远程托管的Javacript文件(http://boobar.com/stuff.js)。 目标是从foobar.com上的远程托管php脚本中获取警报 我在stuff.js中尝试了以下代码: 没运气。 也没有运气。 在php端,我尝试了以下两种方法: 在Firefox中,出现安全错误。我了解它认为我违反了安全模型。

  • 问题内容: 对于一个项目,我需要获取其他不同域的网页的源代码。我尝试了以下代码: 我仍然没有得到任何结果,只是一个空白的警告框。 问题答案: 默认情况下,所有浏览器都限制跨域请求,您可以使用YQL作为代理来解决此问题。在此处查看指南:http://ajaxian.com/archives/using-yql-as-a- proxy-for-cross-domain-ajax

  • 问题内容: 我想从domain2(example2.com)访问位于domain1(example.com)中的JSON文件。例如, 我想从其他网域(例如example2.com)向example.com提出这个Ajax请求。 我已经尝试过JSONP。我不明白它是如何工作的。有人可以解释其工作方式吗? 问题答案: 您的服务必须返回jsonp,这基本上是javascript代码。您需要从ajax请求

  • 本文向大家介绍jQuery使用ajax跨域请求获取数据,包括了jQuery使用ajax跨域请求获取数据的使用技巧和注意事项,需要的朋友参考一下 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功

  • 本文向大家介绍jQuery Ajax实现跨域请求,包括了jQuery Ajax实现跨域请求的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery Ajax跨域请求的具体代码,供大家参考,具体内容如下 html 代码清单: 服务端 validate.php 代码清单: 效果图: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。