`
knight_black_bob
  • 浏览: 854076 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jsonp jquery

    博客分类:
  • java
阅读更多

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

捐助开发者

在兴趣的驱动下,写一个免费的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(右上角的爱心标志,支持支付宝和PayPal捐助),没钱捧个人场,谢谢各位。



 
 
 谢谢您的赞助,我会做的更好!

 

 

分享到:
评论

相关推荐

    jquery下利用jsonp跨域访问实现方法

    在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许我们绕过这个限制,实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...

    jquery-jsonp:jquery jsonp 插件

    jQuery-JSONP jQuery-JSONP 是 jQuery 的 JSONP 实现的一个紧凑(1.8kB 缩小)但功能丰富的替代解决方案。 许可 jQuery-JSONP 是在下发布的。 下载 您可以下载 jQuery-JSONP(提供全文和缩小版本)。 特征 jQuery-...

    jQuery中JSONP的两种实现方式详解

    在jQuery中,JSONP提供了两种实现方式,主要用于解决JavaScript进行AJAX请求时遇到的跨域问题。 ### 第一种实现方式 在jQuery中,我们可以通过设置`dataType`参数为`"jsonp"`来指定使用JSONP。同时,我们需要指定`...

    JSON和JSONP(含jQuery实例)

    这里,`dataType`指定为'jsonp',jQuery会自动处理JSONP的请求过程,包括动态创建`&lt;script&gt;`标签以及处理回调函数。`jsonp`参数可以用来指定回调函数的名称。 需要注意的是,JSONP只支持GET请求,且存在安全隐患,...

    jquery.jsonp插件

    ajax跨域请求,jquery.jsonp插件

    JSONP实现Ajax跨域访问

    jQuery 提供了更简洁的方式来实现JSONP。`$.ajax` 方法可以通过配置`dataType: 'jsonp'` 来自动处理JSONP的相关逻辑。 ```javascript $.ajax({ url: "http://site1.com/api/user.php", dataType: 'jsonp', ...

    jquery-jsonp

    jquery-jsonp插件

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    jquery-jsonp-master.zip

    `jquery-jsonp-master.zip`这个压缩包文件包含了一个专门用于jQuery的JSONP插件,旨在简化和优化JSONP请求的过程。通过这个插件,开发者能够更方便地在他们的应用中集成跨域数据请求,从而获取远程服务器上的JSON...

    jquery-jsonp.js

     7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON...

    jquery-jsonp-master.zip_jsonp

    `jquery-jsonp-master.zip`是一个包含jQuery JSONP实现的压缩包,适用于学习和应用轻量级的JSONP解决方案。 首先,我们需要了解JSONP的基本原理。由于同源策略的限制,JavaScript通常不能直接向其他域名发送Ajax...

    什么是json和jsonp,jQuery json实例详详细说明

    jQuery库提供了方便的JSONP实现,通过`.ajax()`或`.getScript()`方法,只需指定`dataType: 'jsonp'`,jQuery会自动处理JSONP请求的细节。 以下是一个简单的jQuery JSONP示例: ```javascript $.ajax({ url: ...

    ajax 跨域请求问题 jquery jsonp

    **Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...

    JSONP解决跨域问题

    在本场景中,前端使用jQuery库,通过设置`dataType`为`jsonp`来发起JSONP请求,而服务端使用C#编写的Web Service来响应这个请求。 首先,我们来看服务端的C# Web Service代码。在C#中,我们需要创建一个支持JSONP的...

    Jquery与ajax用JSONP方式获取新浪短网址

    在本案例中,我们将探讨如何使用Jquery和ajax通过JSONP方式来调用新浪的API,将长网址转换为新浪的短网址。 首先,我们需要了解JSONP的工作原理。JSONP的基本思路是服务器提供一个JavaScript函数,这个函数接收JSON...

    jquery下利用jsonp跨域访问实现方法.docx

    JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术,尤其在jQuery中得到了广泛的应用。由于浏览器的同源策略限制,JavaScript通常无法在不同源之间进行Ajax请求。但JSONP巧妙地利用了HTML中`...

    JQuery jsonp 使用示例代码

    - `&lt;script type='text/javascript' src='commons/scripts/jquery.js'&gt;&lt;/script&gt;`:引入jQuery库,这是执行JSONP请求的前提,因为JSONP是jQuery支持的功能之一。 3. **jQuery部分**: - `$$(function() { ... })`...

    jQuery+JSONP+artDialog 实现虾米音乐的检索、选取和播放

    在本文中,我们将深入探讨如何使用jQuery、JSONP和artDialog技术实现虾米音乐的检索、选取和播放功能。这是一套常见的Web开发技术组合,适用于跨域数据获取和交互式用户界面的创建。 首先,jQuery是一个强大的...

    JSONP实现Jquery

    NULL 博文链接:https://wangchengyong.iteye.com/blog/1460101

Global site tag (gtag.js) - Google Analytics