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打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
js实现盒子滚动动画效果
Aug 09 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
javascript相关事件的几个概念
2015/05/21 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
使用python实现rsa算法代码
2016/02/17 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python多进程fork()函数详解
2019/02/22 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
Python笔试面试题小结
2019/09/07 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
麦当劳辞职信范文
2014/01/18 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
售后客服个人自我评价
2014/09/14 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
二年级数学教学反思
2016/02/16 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python