浅谈JQuery+ajax+jsonp 跨域访问


Posted in Javascript onJune 25, 2016

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。

一. 客户端

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script> 
</head> 
<script type="text/javascript"> 
$(function(){   
  /* 
  //简写形式,效果相同 
  $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?", 
      function(data){ 
        $("#showcontent").text("Result:"+data.result) 
  }); 
  */ 
  $.ajax({ 
    type : "get", 
    async:false, 
    url : "http://app.example.com/base/json.do?sid=1494&busiId=101", 
    dataType : "jsonp",//数据类型为jsonp 
    jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数 
    success : function(data){ 
      $("#showcontent").text("Result:"+data.result) 
    }, 
    error:function(){ 
      alert('fail'); 
    } 
  });  
}); 
</script> 
<body> 
<div id="showcontent">Result:</div> 
</body> 
</html>

二. 服务器端

import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.HashMap; 
import java.util.Map; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import net.sf.json.JSONObject; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
 
@Controller 
public class ExchangeJsonController { 
  @RequestMapping("/base/json.do") 
  public void exchangeJson(HttpServletRequest request,HttpServletResponse response) { 
    try { 
    response.setContentType("text/plain"); 
    response.setHeader("Pragma", "No-cache"); 
    response.setHeader("Cache-Control", "no-cache"); 
    response.setDateHeader("Expires", 0); 
    Map<String,String> map = new HashMap<String,String>();  
    map.put("result", "content"); 
    PrintWriter out = response.getWriter();    
    JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json 
    String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数 
    out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据 
    out.flush(); 
    out.close(); 
   } catch (IOException e) { 
    e.printStackTrace(); 
   } 
  } 
}

以上就是小编为大家带来的浅谈JQuery+ajax+jsonp 跨域访问全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
多种js图片预加载实现方式分享
Feb 19 Javascript
BootStrap selectpicker
Jun 20 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
vue多次循环操作示例
Feb 08 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
Jquery Fade用法详解
Nov 06 jQuery
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
javascript 广告移动特效的实现代码
Jun 25 #Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 #Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 #Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 #Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 #Javascript
JS全局变量和局部变量最新解析
Jun 24 #Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 #Javascript
You might like
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php实现的递归提成方案实例
2015/11/14 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
php xhprof使用实例详解
2019/04/15 PHP
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
pygame实现成语填空游戏
2019/10/29 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
Bootstrap 学习分享
2012/11/12 HTML / CSS
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
护士思想汇报
2014/01/12 职场文书
业务员自荐信范文
2014/04/20 职场文书
企业安全标语
2014/06/07 职场文书
经典演讲稿开场白
2014/08/25 职场文书
医生个人年度总结
2015/02/28 职场文书
2016寒假假期总结
2015/10/10 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android