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实现的所谓的滑动门
May 23 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
js模拟类继承小例子
Jul 17 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
原生JS封装vue Tab切换效果
Apr 28 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
php5.2时间相差8小时
2007/01/15 PHP
mysql 搜索之简单应用
2007/04/27 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Django发送邮件功能实例详解
2019/09/02 Python
python计算导数并绘图的实例
2020/02/29 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
先进个人事迹材料
2014/01/25 职场文书
yy司仪主持词
2014/03/22 职场文书
入党综合考察材料
2014/06/02 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
DE1103使用报告
2022/04/05 无线电