`
念QC
  • 浏览: 9416 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jQuery JSONP 跨域实践(转自:http://aijezdm915.iteye.com/blog/1066299)

    博客分类:
  • html
阅读更多

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的编码最好,这样省得编码转换了

最终效果截图:

1

分享到:
评论

相关推荐

    jquery跨域获取json

    标题 "jquery跨域获取json" 涉及到的是JavaScript中的一个常见问题,即如何在浏览器环境中使用jQuery库跨越域限制获取JSON数据。这通常涉及到AJAX请求和JSONP(JSON with Padding)技术。 首先,我们需要理解Web...

    jquery中文手册

    - 博文链接:https://rather-lonely.iteye.com/blog/768695 提供了关于jQuery的深入学习和实践指导。 - 官方文档:https://api.jquery.com/ 是学习jQuery API的重要参考。 - 在线示例和教程:网上有大量免费资源...

    jQuery广告图片各大商城首页流行通栏广告图片-20130702

    在描述中提到的“博文链接:https://xjwolaile.iteye.com/blog/1897691”,这可能是一个详细的博客文章,提供了如何使用jQuery来设计和实现这些广告图片的步骤和代码示例。虽然具体的内容无法在此直接给出,但通常这...

    《王兴魁老师Jquery讲义》源码工程完毕

    《王兴魁老师Jquery讲义》源码工程完毕,这个资源主要涵盖了jQuery库的深入理解和实际应用...配合博客链接(https://xiaolinjava.iteye.com/blog/721696)提供的详细讲解,相信能为你的jQuery学习之路提供宝贵的指导。

    比较完整的原始ajax写法

    博客链接(https://abstractforever.iteye.com/blog/524148)可能会提供更详细的示例和解释,包括如何处理异步操作、如何使用JSONP解决跨域问题,以及如何处理错误等。 标签“源码”和“工具”提示这个主题可能涉及...

    Ajax Sample

    在Jerry Shen的博客中(https://jerry-shen.iteye.com/blog/133177),他分享了一个关于Ajax应用的示例,可能涵盖了如何使用JavaScript库如jQuery或者原生JavaScript来实现Ajax请求。这篇博客可能详细解释了Ajax的...

    第13章 Ajax进阶(下)

    【标题】:“第13章 Ajax进阶(下)” 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术是一种让网页实现异步更新...如果想深入了解每个点,可以参考博文链接:https://onestopweb.iteye.com/blog/2227919。

    常用到的一些JS

    这篇博客可能涵盖了各种实用的JS代码片段、函数、方法以及最佳实践。 在描述中,虽然没有提供具体信息,但根据“博文链接”可以推测,作者“xuningxiaoni”在iteye博客平台上分享了关于JS的内容。iteye是一个程序员...

    ajax例子

    这篇博客文章"ajax例子"提供了关于如何在实际项目中应用Ajax的示例,作者yanwu在iteye博客平台上分享了这些内容。通过阅读这篇文章,读者可以学习到以下关键知识点: 1. **XMLHttpRequest对象**:Ajax的核心是...

    java资料夹

    描述中提及的博文链接指向了iteye博客上的一篇文章,虽然具体内容未给出,但我们可以推测这可能涉及到了Java技术的某个具体方面或实际应用问题。 首先,让我们从标签“源码”和“工具”来探讨相关知识点。源码通常...

Global site tag (gtag.js) - Google Analytics