您的位置：首页 > Web前端 > JQuery

jquery实现ajax跨域请求

2018-02-27 14:57 736 查看

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
　　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)

下载代码： https://files.cnblogs.com/files/dylan-wu/jsonp.rar

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航