jQuery JSONP 实践

简介: 客户端页面首先在body 中放置一个div: 将远程调用的数据写入该div中     $(document).ready(function(){        $.ajax({             url:'http://192.

客户端页面首先在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_proc.asp',
             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.1.5/jsonp_proc.asp
代码很简单,就是输出一个字符串
比如正常输出json应该是:[{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]
jsonp 则输出: jsonpcallback([{"id":"1","name":"测试1"},{"id":"2","name":"测试2"}]) 其中“jsonpcallback”是客户端传过来的


  jsonp = request("jsonpcallback")
  str 
= "[{""id"":""1"",""name"":""测试1""},{""id"":""2"",""name"":""测试2""}]"
  str 
= jsonp & "(" & str&")"
  response.Write(str)

由于 jquery 在ajax 处理中使用的是utf-8编码传递参数的,所以jsonp处理端用utf-8的编码最好,这样省得编码转换了

最终效果截图:

目录
相关文章
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
58 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
62 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
64 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
47 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
42 4
jQuery Cookie 插件
|
22天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
5月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
35 0
|
JavaScript
jQuery 自定义插件(详细步骤)
jQuery 自定义插件(详细步骤)
132 0