jq+jsonp+ajax解决跨域问题
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。
关于Jsonp更详细的资料请参考http://baike.baidu.com/view/2131174.htm,下面给出例子:
一.客户端
- <!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();
- }
- }
- }
jq+jsonp+ajax解决跨域问题的更多相关文章
- ajax解决跨域
http://www.cnblogs.com/sunxucool/p/3433992.html 为什么会出现跨域跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相 ...
- JSONP方法解决跨域请求
Ajax跨域请求的问题 跨域:跨域名, 一个域名下的文件去请求了和他不一样的域名下的资源文件(注意是请求文件,而不是数据接口),那么就会产生跨域请求,下面来写一个ajax来跨域请求的例子 <!D ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
- ajax解决跨域方法(适用于自己写接口解决跨域)
原因是这样的:最近用PHP开发了一个网站,这个网站需要提供接口,接口开发完成之后,在本地进行请求,跨域测试. jsonp处理跨域和用PHP函数来处理跨域就不说了. 现在说的使用用 header 这个来 ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题
客服端: 在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...
- 使用jsonp完美解决跨域问题
调用web接口,get请求,发现提示:No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个和 ...
- ajax解决跨域问题
1.在介绍之前先介绍几个概念 json: { date: "Sun Dec 24 21:44:42 CST 2017", temperature: "21", ...
- 详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)
众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...
随机推荐
- eclipse中新建jni工程
1.什么是NDK 网上很多不多说,全称是Android Native Developer Kit,是一个工具合集,我理解可以把c/c++打包成.so文件 这是目录结构,要用到指令ndk-build 需 ...
- contiki-进程
进程的结构 Contiki的进程由两部分组成:进程控制块和进程线程.进程控制块存储在内存中,它包含进程运行时的信息,比如:进程名.进程状态.指向进程线程的指针. 进程线程是存储在ROM中的一个代码块. ...
- callee
首先解释callee 参考网站 http://www.css88.com/archives/1706 callee是arguments的一个成员,仅当函数正在执行的时候才可用,so用于递归也行 代码示 ...
- js高级程序设计(五)引用类型
Object类型 创建Object 实例的方式有两种.第一种是使用new 操作符后跟Object 构造函数. var person = new Object(); person.name = &quo ...
- linux注销、关机、重启
一.Logout 注销是登陆的相对操作,登陆系统后,若要离开系统,用户只要直接下达logout命令即可:[root@laolinux root]#logoutRed Hat Linux release ...
- ListView在列表的头部和底部添加布局——addHeaderView,addFooterView
addHeaderView()方法:主要是向listView的头部添加布局addFooterView()方法:主要是向listView的底部添加布局 以addHeaderView为例: View he ...
- MySQL操作汇总[转]
这学期学习了数据库系统原理,做了实验,mark一记. 目录(没有一键目录不开心...) 1.T—SQL的简单查询.连接查询 (1)用SQL语句建库.建表并插入记录. (2)修改表结构,包括修改属性 ...
- Swift 01.String
1.字符串拼接 var num1 = "hello,world" var name = "xiaoming" var age = let student = n ...
- DateFomrat Mask in ASPxTextbox increases width ,How to disable display of dxeErrorCell on ASPxTextBox
让ASPxTextbox显示yyyy-MM-dd, 需设置 <MaskSettings Mask="yyyy-MM-dd" />.但是会导致ASPxTextbox宽度变 ...
- sharepoint Report使用共享数据源部署报错
在VS中做了一下报表,把数据源设置成为共享数据源,部署时发生以下错误: 解决方法:在VS中解决方案窗口,选择共享数据源中的用到的数据源名称,右键点击,选择“部署”,部署成功后,再部署报表即可.