浅谈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 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
JavaScript函数基础详解
Feb 03 Javascript
详解Vue方法与事件
Mar 09 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
Node.js 多线程完全指南总结
Mar 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 SQLite类
2009/05/07 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php跨服务器访问方法小结
2015/05/12 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
Python将多份excel表格整理成一份表格
2018/01/03 Python
python的socket编程入门
2018/01/29 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
详解python中*号的用法
2019/10/21 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
影视艺术学院毕业生自荐信
2013/11/13 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
同意迁入证明模板
2014/10/26 职场文书
助学感谢信范文
2015/01/21 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python