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 相关文章推荐
js左侧三级菜单导航实例代码
Sep 13 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
使用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上传、管理照片示例
2006/10/09 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
python发布模块的步骤分享
2014/02/21 Python
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
python内存管理机制原理详解
2019/08/12 Python
大学生就业自荐信
2013/10/26 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
爱晚亭导游词
2015/02/09 职场文书
一般纳税人申请报告
2015/05/18 职场文书
六一儿童节致辞
2015/07/31 职场文书
2019新员工心得体会
2019/06/25 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
MySQL 数据类型详情
2021/11/11 MySQL