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 相关文章推荐
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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用户指南-cookies部分
2006/10/09 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
javascript 写类方式之七
2009/07/05 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python中属性和描述符的正确使用
2016/08/23 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python 经典数字滤波实例
2019/12/16 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
学校感恩教育活动总结
2014/07/07 职场文书
安全月宣传标语
2014/10/07 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
Python开发五子棋小游戏
2022/04/28 Python