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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 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伪造referer实例代码
2008/09/20 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python相似模块用例
2016/03/04 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
python 模块导入问题汇总
2021/02/01 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
会计自荐书
2013/12/02 职场文书
运动会跳远加油稿
2014/02/20 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
财务工作检讨书
2014/10/29 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
十岁生日答谢词
2015/01/05 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书