jsonp跨域请求实现示例

作者：袖梨 2022-06-25

网上看了很多关于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);

 }

}

 

相关文章

精彩推荐