浅谈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 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
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开发需要注意的安全问题
2010/09/01 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python使用tkinter实现简单计算器
2018/01/30 Python
Python shelve模块实现解析
2019/08/28 Python
Python与C/C++的相互调用案例
2021/03/04 Python
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
农场厂长岗位职责
2013/12/28 职场文书
销售总监岗位职责
2014/01/04 职场文书
怎样写离婚协议书
2014/09/10 职场文书
店铺转让协议书
2014/12/02 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL