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中显示隐藏的实现代码分析
Jul 26 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
js实现分割上传大文件
Mar 09 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
基于js实现数组相邻元素上移下移
May 19 Javascript
js验证账户名是否重复
May 26 Javascript
Js类的构建与继承案例详解
Sep 15 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源代码
2009/08/21 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP Session机制简介及用法
2014/08/19 PHP
orm获取关联表里的属性值
2016/04/17 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
cookie的secure属性详解
2015/04/08 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
详解Django中的权限和组以及消息
2015/07/23 Python
python求质数的3种方法
2018/09/28 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
男女朋友协议书
2014/04/23 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python