最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jsonp跨域请求实现示例
时间:2017-06-22 编辑:简简单单 来源:一聚教程网
网上看了很多关于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;
代码如下 | 复制代码 |
importjava.io.IOException; importjava.io.PrintWriter; importjavax.servlet.ServletException; importjavax.servlet.annotation.WebServlet; importjavax.servlet.http.HttpServlet; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; @WebServlet("/jsonp") publicclassjsonpextendsHttpServlet{ @Override protectedvoiddoGet(HttpServletRequest req, HttpServletResponse resp) throwsServletException, 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 protectedvoiddoPost(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException { // TODO Auto-generated method stub doGet(req, resp); } } |
-
上一个: HTML简介_动力节点Java学院整理
相关文章
- json跨域调用python的方法详解 01-11
- js中利用JSONP解决跨域问题 03-18
- JSONP跨域用法详细介绍 01-10
- jsonp跨域访问实现方法 07-29
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31