浅谈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 年会抽奖程序
Dec 22 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
Vue实现根据hash高亮选项卡
May 27 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+MySQL的聊天室设计
2006/10/09 PHP
PHP Document 代码注释规范
2009/04/13 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
php继承的一个应用
2011/09/06 PHP
php获取文件大小的方法
2014/02/26 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python使用分布式锁的代码演示示例
2018/07/30 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
python Xpath语法的使用
2020/11/26 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
初中生期末评语大全
2014/04/24 职场文书
促销活动总结
2014/04/28 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript