ajax 跨域请求 JSONP 实践

 

 

一直对jQuery 的jsonp 调用比较疑惑,今天研究了一下jsonp 做了一个简单的调用例子,我用asp做服务端s

客户端(url:http://192.168.1.2:81/jsonp_test.asp)

客户端页面首先在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(){
   var html = "";
     $.ajax({
         type: 'GET',
         url:'dowith.jsp',
         dataType:"jsonp",
         jsonp:"jsonpcallback",
         error:function(xmlHttpRequest,error){
          alert(error);
         },
         success:function(data){
          $.each(data,function(i,v){
           html +="<p>id:" +v['id']+  " name:"  +v['name']+" </p>";
          });
             $("#res").append(html);
         }
    });
});
</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”是客户端传过来的


response.setContentType("application/json; charset=utf-8");
String jsonpcallback = request.getParameter("jsonpcallback");
String str = "[{\"id\":"+100+",\"name\":\"aije\"},{\"id\":"+200+",\"name\":\"liruqin\"}]";
str = jsonpcallback+"("+str+")";
out.write(str);

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

<div id="res"></div>


最终效果截图:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我! 基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值