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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
详解react-redux插件入门
Apr 19 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
js树形控件脚本代码
2008/07/24 Javascript
jQuery each()小议
2010/03/18 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
python 回调函数和回调方法的实现分析
2016/03/23 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python数字类型math库原理解析
2020/03/02 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
毕业生就业推荐信范文
2013/12/01 职场文书
办理居住证介绍信
2014/01/15 职场文书
实习报告评语
2014/04/26 职场文书
租房协议书样本
2014/08/20 职场文书
2014年维修工作总结
2014/11/22 职场文书
超市收银员岗位职责
2015/04/07 职场文书