jquery实现ajax跨域请求
1.跨域问题：
  是因为浏览器的同源策略是对ajax请求进⾏阻拦了，但是不是所有的请求都给做跨域，像是⼀般的href属性，a标签什么的都不拦截。
如：
  项⽬⼀：p1.html
<body>
<h1>项⽬⼀</h1>
<button class="send_jsonp">jsonp</button>
<script>
$(".send_jsonp").click(function () {
$.ajax({
url:"127.0.0.1:8080/ajax_send2/",  #去请求项⽬⼆中的url
success:function (data) {
console.log(data)
}
})
发送ajax请求的步骤})
</script>
</body>
    p1.py
1from flask import Flask
2from flask import render_template,redirect,request,jsonify
3 app = Flask(__name__)
4
5 @ute("/p1",methods=['POST','GET'])
6def p1():
7return render_template('p1.html')
8
9
10if__name__ == '__main__':
11    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__)
@ute("/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="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__)
@ute("/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:"127.0.0.1:8080/ajax_send2",  //去请求项⽬⼆中的url
dataType:"jsonp",
jsonp:'callbacks',
success:function (data) {
console.log(data)
}
})
});
</script>
{#<script src="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__)
@ute("/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 = ("callbacks")  # 注意要在服务端得到回调函数名的名字
print callbacks
return"%s('%s')" % (callbacks, json.dumps(s))
if__name__ == '__main__':
app.run(host='0.0.0.0',port=8080)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。