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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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 fread()使用技巧
2010/01/22 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
类的核心特性有哪些
2014/01/01 面试题
经典婚礼主持开场白
2014/03/13 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
信访维稳承诺书
2015/05/04 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python