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语句可以不以;结尾的烦恼
Mar 08 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
JavaScript阻止事件冒泡的方法
Dec 06 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php实现的SESSION类
2014/12/02 PHP
隐性调用php程序的方法
2015/06/13 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JS判断数组那点事
2017/10/10 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
python环境下安装opencv库的方法
2020/03/05 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
销售员自我评价怎么写
2013/09/19 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
面试后的英文感谢信
2014/02/01 职场文书
五型班组建设方案
2014/02/10 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
绿色校园广播稿
2014/10/13 职场文书
离婚起诉书范本
2015/05/18 职场文书
实用求职信模板范文
2019/05/13 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
python基础之文件操作
2021/10/24 Python