jsonp跨域请求实现示例


Posted in Javascript onMarch 13, 2017

网上看了很多关于jsonp的资料,发现在本机运行后实现不了,有的是有错漏,有的是说的比较含糊,接合自己的情况,整了一个可运行的示例;

前言:

ajax请求地址:http://192.168.1.102:8080/carop/jsonp

服务端要返回的jsonp字符串:jsonpCallback({"name":"刘德华","电话":"17688888888"})

jsonp写法,写法上可以理解成一个javascript函数的执行,例如alert("hello world")会弹出hello world的窗口,再例如alert({"name":"刘德华"})会弹出[object Object]的窗口。(注意这里参数两端没加双引号,它是一个有属性的对象而不是一个字符串)

那么本示例的jsonp中,可以将jsonpCallback理解成函数名,{"name":"刘德华","电话":"17688888888"}这个对象是这个函数执行时所要传递的参数。

客户端:

$.ajax({
       type: "get",
       async:false,
url: "http://192.168.1.102:8080/carop/jsonp",
       dataType: "jsonp",
jsonpCallback:"jsonpCallback",       
       success: function(data){
       alert(data.name+"\n "+data.tel);
       }
     });

其他的ajax方法比如getjson亦可,写法上有区别,这里仅采用一种方法。

说明:jsonpCallback:"jsonpCallback",前一个ajax参数表示要执行的函数,后面的”jsonpCallback“,这个是服务器返回jsonp的javascript函数名。(网上有相关资料这个参数写的是jsonp而不是jsonpCallback,经实际测试要写成jsonpCallback,jquery版本1.8,所测试浏览器为火狐和edge)

服务端

servlet控制器层直接返回jsonp;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/jsonp")
public class jsonp extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
 throws ServletException, IOException {
 resp.setCharacterEncoding("UTF-8");
 //System.out.println("进入jsonp");
 resp.setContentType("text/json;charset=utf-8");
 String json="{\"name\":\"刘德华\",\"tel\":\"17688888888\"}";
 String jsonp="jsonpCallback("+json+")";
 PrintWriter pw=resp.getWriter();
 System.out.println(jsonp);
 pw.print(jsonp);
}
@Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // TODO Auto-generated method stub
 doGet(req, resp);
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
jquery remove方法应用详解
Nov 22 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
Angular 应用技巧总结
Sep 14 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 #Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 #Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 #Javascript
JS实现的简单拖拽功能示例
Mar 13 #Javascript
jQuery中layer分页器的使用
Mar 13 #Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 #Javascript
Node.js调试技术总结分享
Mar 12 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
php创建sprite
2014/02/11 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP制作万年历
2015/01/07 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
详解Python的Lambda函数与排序
2016/10/25 Python
python实现简单五子棋游戏
2019/06/18 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
给同学的道歉信
2014/01/16 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang