AJAX/jsonp实现跨域传输数据

6 篇文章 0 订阅
2 篇文章 0 订阅

Java后端与普通页面(也可是其他服务器)之间的跨域传输数据代码示例

ps.文中用到的JSONObject需要引入以下这个包(maven)

<dependency>
  <groupId>net.sf.json-lib</groupId>
  <artifactId>json-lib</artifactId>
  <version>0.9</version>
</dependency>

进入正题,就是看代码来的…

/*  SpringMVC代码  */
@RequestMapping("/getInfo")
public void getInfo(HttpServletRequest req, HttpServletResponse resp) {
    resp.setCharacterEncoding("UTF-8");
    resp.setContentType("text/html;charset=UTF-8");
    try {
        Map<String,String> map = new HashMap<String,String>();
        //将传输的数据put进map中
        map.put("id", id);
        map.put("name", name);
        PrintWriter out = resp.getWriter();
        //装入json
        JSONObject resultJSON = JSONObject.fromObject(map);
        //另一端请求的参数
        String jsonpCallback = req.getParameter("jsonpCallback");
        //返回jsonp格式数据(敲黑板)
        out.println(jsonpCallback+"("+resultJSON.toString()+")");
        out.flush();
        out.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}
/*  jQuery代码  */
$.ajax({
    //jsonp只能使用GET(明文传输)
    type : 'GET',
    contentType : 'application/json;charset=utf-8',
    //ps.可以新开页面查看url所传输的数据
    url : "http://localhost:8080/getInfo",
    dataType : 'jsonp',
    //jsonp需要与Java后台out格式对应(可不写则默认callback)
    jsonp: "jsonpCallback",
    /*
    自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
    详见:http://api.jquery.com/jQuery.ajax/
    */
    //jsonpCallback:"jsonpCallback",
    success : function(data) {
        //直接data.调用即可
        $("#id").text(data.id);
        $("#name").text(data.name);
    },
    error : function() {
        alert("error");
    }
});


希望本文可以作为参考,帮到大家.
加油,共勉

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值