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,但是不会返回任何数 ...
随机推荐
- C/C++中的变量和静态变量
static有两种用法:一是面向过程程序设计语言中的static,用于普通变量和函数,不涉及类:二是面向对象程序设计中的static,主要涉及static在类中的作用. 面向过程设计中的static ...
- const关键字浅析
1 const变量 const double PI = 3.14159; 定义之后不能被修改,所以定义时必须初始化. const int i, j = 0; // error: i is unini ...
- LeetCode——Contains Duplicate II
Description: Given an array of integers and an integer k, find out whether there there are two disti ...
- vux报错 this指针问题
报错: 代码: 结果:取不到this.tishi,不明白为什么在请求内部会取不到这个值. 分析:this可能有问题 解决: 结果: 这样就能取到this.tishi的值了. 总结: methods:{ ...
- Linux系统内核main函数执行之前
1.linux是一个操作系统在机器加电后,需要从硬件通过一个引导程序加载os kernel,那么在os kernel的main函数运行之前,都发生了什么呢? (1)引导BIOS(存储在ROM芯片中,R ...
- IOS中使用轻量级数据库
IOS中使用轻量级数据库 目录 概述 IOS中的轻量级数据库 sqlite的方法 数据库的实用操作 第三方类库 FMDatabase 概述 IOS中的轻量级数据库 sqlite的方法 sqlite3 ...
- Unity3D之Unity3D 4.3.0 破解方法
Dear All 破解有风险,破解不尊重知识产权,如果有涉及请删除或者联系我……以下呢 是我这几天捣鼓的4.3.0版本 供学习!请大家支持正版! 1.下载最新版本 我是在Unity官网下载的最新版本 ...
- 摄像头的管理(camera) ---- HTML5+
模块:camera Camera模块管理设备的摄像头,可用于拍照.摄像操作,通过plus.camera获取摄像头管理对象. 应用场景:保存自拍,保存照片,上传照片,保存视频,上传视频: 通过之前的模块 ...
- 二叉树各种相关操作(建立二叉树、前序、中序、后序、求二叉树的深度、查找二叉树节点,层次遍历二叉树等)(C语言版)
将二叉树相关的操作集中在一个实例里,有助于理解有关二叉树的相关操作: 1.定义树的结构体: typedef struct TreeNode{ int data; struct TreeNode *le ...
- JS拖拽事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...