jquery实现ajax跨域请求
1.跨域问题:
是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截。
如:
项目一:p1.html
<body>
<h1>项目一</h1>
<button class="send_jsonp">jsonp</button>
<script>
$(".send_jsonp").click(function () {
$.ajax({
url:"http://127.0.0.1:8080/ajax_send2/", #去请求项目二中的url
success:function (data) {
console.log(data)
}
})
})
</script>
</body>
p1.py
from flask import Flask
from flask import render_template,redirect,request,jsonify
app = Flask(__name__) @app.route("/p1",methods=['POST','GET'])
def p1():
return render_template('p1.html') if __name__ == '__main__':
app.run(host='127.0.0.1',port=80)
p1.py
项目二:p2.py
from flask import Flask
from flask import render_template,redirect,request,jsonify
app = Flask(__name__) @app.route("/ajax_send2",methods=['POST','GET'])
def ajax_send2():
print(222222)
return 'hello' if __name__ == '__main__':
app.run(host='0.0.0.0',port=8080)
出现了一个错误,这是因为同源策略给限制了,这是游览器给我们报的一个错
(但是注意,项目2中的访问已经发生了,说明是浏览器对非同源请求返回的结果做了拦截。)
注意:a标签,form,img标签,引用cdn的css等也属于跨域(跨不同的域拿过来文件来使用),不是所有的请求都给做跨域,(为什么要进行跨域呢?因为我想用人家的数据,所以得去别人的url中去拿,借助script标签)
只有发ajax的时候给拦截了,所以要解决的问题只是针对ajax请求能够实现跨域请求
解决同源策源的两个方法:
1、jsonp(将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义。)
jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。
借助script标签,实现跨域请求,示例:
所以只是单纯的返回一个也没有什么意义,我们需要的是数据
如下:可以返回一个字典,不过也可以返回其他的(简单的解决了跨域,利用script)
项目一:
<body>
<h1>项目一</h1>
<button class="send_jsonp">jsonp</button>
<script>
$(".send_jsonp").click(function () {
$.ajax({
url:"",
success:function (data) {
console.log(data)
}
})
}); function func(arg) {
console.log(arg)
}
</script>
<script src="http://127.0.0.1:8080/ajax_send2/"></script>
</body>
项目二:
def ajax_send2(request):
import json
print(222222)
# return HttpResponse("func('name')")
s = {"name":"dylan","age":18}
# return HttpResponse("func('name')")
return HttpResponse("func('%s')"%json.dumps(s))
#返回一个func()字符串,正好自己的ajax里面有个func函数,就去执行func函数了,arg就是传的形参
这回访问项目一就取到值了:
这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。
将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义。
2. jQuery对JSONP的实现:
项目一:
from flask import Flask
from flask import render_template,redirect,request,jsonify
app = Flask(__name__) @app.route("/p1",methods=['POST','GET'])
def p1():
return render_template('p1.html') if __name__ == '__main__':
app.run(host='127.0.0.1',port=80)
p1.py
p1.html:
<body>
<h1>项目一</h1>
<button class="send_jsonp">jsonp</button>
<script src="/static/jquery.min.js"></script>
<script>
$(".send_jsonp").click(function () {
$.ajax({
url:"http://127.0.0.1:8080/ajax_send2", //去请求项目二中的url
dataType:"jsonp",
jsonp:'callbacks',
success:function (data) {
console.log(data)
}
})
}); </script>
{#<script src="http://127.0.0.1:8080/ajax_send2"></script>#}
</body>
jsonp: 'callbacks'就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名'SayHi',server端接受callback键对应值后就可以在其中填充数据打包返回了;
jsonpCallback参数可以不定义,jquery会自动定义一个随机名发过去,那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。
注意 JSONP一定是GET请求
项目二:p2.py
from flask import Flask
from flask import render_template,redirect,request,jsonify
app = Flask(__name__) @app.route("/ajax_send2",methods=['POST','GET'])
def ajax_send2():
import json
print(222222)
# return HttpResponse("func('name')")
s = {"name":"dylan","age":18}
# return HttpResponse("func('name')")
callbacks = request.values.get("callbacks") # 注意要在服务端得到回调函数名的名字
print callbacks
return "%s('%s')" % (callbacks, json.dumps(s)) if __name__ == '__main__':
app.run(host='0.0.0.0',port=8080)
jquery实现ajax跨域请求的更多相关文章
- JQuery的Ajax跨域请求的
JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的 ...
- jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...
- JQuery的Ajax跨域请求原理概述及实例
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...
- [转载]JQuery的Ajax跨域请求的解决方案
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...
- JQuery的Ajax跨域请求的解决方式
今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...
- Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法
如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable. 在实现 ...
- jquery实现ajax跨域请求!亲测有效
在解决跨域的时候,我通常会用豆瓣api作为尝试. 下面是本地跨域请求豆瓣API:亲测有效: <script type="text/javascript"> var ur ...
- JQuery的Ajax跨域请求的解决方案
客户端调用代码示例: var myurl = "http://js.yingdoo.com/embed/CAPTCHA.ashx?m=" + phone_val + "& ...
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
随机推荐
- js 对象引用传值
1)当变量是一个对象(例如:{}或[]),使用 a = b = {} 这种形式传值的话,会变成会用传值,修改 a 时 b 会相应变化,修改 b 时 a 也一样会相应变化 var a = b = {}; ...
- Python 入门(六)Dict和Set类型
什么是dict 我们已经知道,list 和 tuple 可以用来表示顺序集合,例如,班里同学的名字: ['Adam', 'Lisa', 'Bart'] 或者考试的成绩列表: [95, 85, 59] ...
- Linux 虚拟终端:screen
screen 是一个虚拟终端,我们可以把执行时间很长的命令放在虚拟终端中执行,即使终端断开,这个虚拟终端也会在后台执行 [root@localhost ~]$ yum install -y scree ...
- ubuntu的安装方法
Ubuntu 是一个启动速度超快.界面友好.安全性好的开源操作系统,它由全球顶尖开源软件专家开发,适用于桌面电脑.笔记本电脑.服务器以及上网本等,并且它可以永久免费使用.如果你厌倦了Windows,如 ...
- 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)
在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...
- cocos2d-x游戏引擎核心之八——多线程
一.多线程原理 (1)单线程的尴尬 重新回顾下 Cocos2d-x 的并行机制.引擎内部实现了一个庞大的主循环,在每帧之间更新各个精灵的状态.执行动作.调用定时函数等,这些操作之间可以保证严格独立,互 ...
- js嵌套轮播图
$(function(){ var navLi = $(".top_nav").find("li"), conDiv = $(".top_con&qu ...
- etc/fstab
etc/fstab 就是在开机引导的时候自动挂载到linux的文件系统 设备名称 挂载点 分区的类型 挂载选项 dump选项 fsck选项UUID=ce25cdc7-434f-420b-b3 / ex ...
- 字符串处理(String)
字符串类型(String类)需要注意的几个函数: 1.字符串的连接.一般而言,Java不允许运算符直接应用到String对象,唯一的例外是"+"运算符,它用来连接两个字符串,产生一 ...
- Ext学习系列(1)初识Ext
Ext 基础页设置: <!-- 最好不要设置的文件头,避免IE的问题 --><html> <!-- 每份有效的HTML应符合标准,为此head标签不能少 -->&l ...