浅谈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更优雅的兼容
Aug 12 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
js实现常见的工具条效果
Mar 02 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
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
模仿OSO的论坛(二)
2006/10/09 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
在Python中使用模块的教程
2015/04/27 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
Delphi工程师笔试题
2013/09/21 面试题
化学实验员岗位职责
2013/12/28 职场文书
个人欠款担保书
2014/05/20 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
2015年质检工作总结
2015/05/04 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis