jQuery JSONP 跨域实践
一客户端(url:http://192.168.1.2:81/jsonp_test.jsp
)
客户端页面首先在body 中放置一个div: <div id="res"></div> 将远程调用的数据写入该div中
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:'http://192.168.9.5/jsonp_test1.jsp',
dataType:"jsonp",
jsonp:"jsonpcallback",
success:function(data){
var $ul = $("<ul></ul>");
$.each(data,function(i,v){
$("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
});
$("#res").append($ul);
}
});
});
</script>
服务端(url:
http://192.168.9.5/jsonp_test1.jsp
)
代码很简单,就是输出一个字符串
比如正常输出json应该是:[{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]
jsonp 则输出: jsonpcallback([{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]) 其中“jsonpcallback”是客户端传过来的
jsonp = request.getParameter("jsonpcallback")
str = "[{""id"":""1"",""name"":""测试1""},{""id"":""2"",""name"":""测试2""}]"
str = jsonp + "(" +str+")"
response.Write(str)
由于 jquery 在ajax 处理中使用的是utf-8编码传递参数的,所以jsonp处理端用utf-8的编码最好,这样省得编码转换了
最终效果截图:
分享到:
相关推荐
标题 "jquery跨域获取json" 涉及到的是JavaScript中的一个常见问题,即如何在浏览器环境中使用jQuery库跨越域限制获取JSON数据。这通常涉及到AJAX请求和JSONP(JSON with Padding)技术。 首先,我们需要理解Web...
- 博文链接:https://rather-lonely.iteye.com/blog/768695 提供了关于jQuery的深入学习和实践指导。 - 官方文档:https://api.jquery.com/ 是学习jQuery API的重要参考。 - 在线示例和教程:网上有大量免费资源...
在描述中提到的“博文链接:https://xjwolaile.iteye.com/blog/1897691”,这可能是一个详细的博客文章,提供了如何使用jQuery来设计和实现这些广告图片的步骤和代码示例。虽然具体的内容无法在此直接给出,但通常这...
《王兴魁老师Jquery讲义》源码工程完毕,这个资源主要涵盖了jQuery库的深入理解和实际应用...配合博客链接(https://xiaolinjava.iteye.com/blog/721696)提供的详细讲解,相信能为你的jQuery学习之路提供宝贵的指导。
博客链接(https://abstractforever.iteye.com/blog/524148)可能会提供更详细的示例和解释,包括如何处理异步操作、如何使用JSONP解决跨域问题,以及如何处理错误等。 标签“源码”和“工具”提示这个主题可能涉及...
在Jerry Shen的博客中(https://jerry-shen.iteye.com/blog/133177),他分享了一个关于Ajax应用的示例,可能涵盖了如何使用JavaScript库如jQuery或者原生JavaScript来实现Ajax请求。这篇博客可能详细解释了Ajax的...
【标题】:“第13章 Ajax进阶(下)” 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术是一种让网页实现异步更新...如果想深入了解每个点,可以参考博文链接:https://onestopweb.iteye.com/blog/2227919。
这篇博客可能涵盖了各种实用的JS代码片段、函数、方法以及最佳实践。 在描述中,虽然没有提供具体信息,但根据“博文链接”可以推测,作者“xuningxiaoni”在iteye博客平台上分享了关于JS的内容。iteye是一个程序员...
这篇博客文章"ajax例子"提供了关于如何在实际项目中应用Ajax的示例,作者yanwu在iteye博客平台上分享了这些内容。通过阅读这篇文章,读者可以学习到以下关键知识点: 1. **XMLHttpRequest对象**:Ajax的核心是...
描述中提及的博文链接指向了iteye博客上的一篇文章,虽然具体内容未给出,但我们可以推测这可能涉及到了Java技术的某个具体方面或实际应用问题。 首先,让我们从标签“源码”和“工具”来探讨相关知识点。源码通常...