浅谈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 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 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
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
vue按需加载实例详解
2019/09/06 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Python3 log10()函数简单用法
2019/02/19 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
简单介绍Object类的功能、常用方法
2013/10/02 面试题
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
网页美工求职信
2014/02/15 职场文书
英文推荐信格式范文
2014/05/09 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
Vue.Draggable实现交换位置
2022/04/07 Vue.js