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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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
php5 mysql分页实例代码
2008/04/10 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
机关节能减排实施方案
2014/03/17 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
党员活动总结
2015/02/04 职场文书
担保贷款承诺书
2015/04/30 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript