浅谈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动态创建表格,删除行列的小例子
Jul 20 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
php商品对比功能代码分享
2015/09/24 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
php xhprof使用实例详解
2019/04/15 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python中input与raw_input 之间的比较
2017/08/20 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python中Lambda表达式详解
2019/11/20 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
安全责任书模板
2014/07/22 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang