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)

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

jquery实现ajax跨域请求的更多相关文章

  1. JQuery的Ajax跨域请求的

    JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的 ...

  2. jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...

  3. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  4. [转载]JQuery的Ajax跨域请求的解决方案

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuer ...

  5. JQuery的Ajax跨域请求的解决方式

            今天在项目中须要做远程数据载入并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究 ...

  6. Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法

    如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable.  在实现 ...

  7. jquery实现ajax跨域请求!亲测有效

    在解决跨域的时候,我通常会用豆瓣api作为尝试. 下面是本地跨域请求豆瓣API:亲测有效: <script type="text/javascript"> var ur ...

  8. JQuery的Ajax跨域请求的解决方案

    客户端调用代码示例: var myurl = "http://js.yingdoo.com/embed/CAPTCHA.ashx?m=" + phone_val + "& ...

  9. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

随机推荐

  1. js 对象引用传值

    1)当变量是一个对象(例如:{}或[]),使用 a = b = {} 这种形式传值的话,会变成会用传值,修改 a 时 b 会相应变化,修改 b 时 a 也一样会相应变化 var a = b = {}; ...

  2. Python 入门(六)Dict和Set类型

    什么是dict 我们已经知道,list 和 tuple 可以用来表示顺序集合,例如,班里同学的名字: ['Adam', 'Lisa', 'Bart'] 或者考试的成绩列表: [95, 85, 59] ...

  3. Linux 虚拟终端:screen

    screen 是一个虚拟终端,我们可以把执行时间很长的命令放在虚拟终端中执行,即使终端断开,这个虚拟终端也会在后台执行 [root@localhost ~]$ yum install -y scree ...

  4. ubuntu的安装方法

    Ubuntu 是一个启动速度超快.界面友好.安全性好的开源操作系统,它由全球顶尖开源软件专家开发,适用于桌面电脑.笔记本电脑.服务器以及上网本等,并且它可以永久免费使用.如果你厌倦了Windows,如 ...

  5. 基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)

    在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-P ...

  6. cocos2d-x游戏引擎核心之八——多线程

    一.多线程原理 (1)单线程的尴尬 重新回顾下 Cocos2d-x 的并行机制.引擎内部实现了一个庞大的主循环,在每帧之间更新各个精灵的状态.执行动作.调用定时函数等,这些操作之间可以保证严格独立,互 ...

  7. js嵌套轮播图

    $(function(){ var navLi = $(".top_nav").find("li"), conDiv = $(".top_con&qu ...

  8. etc/fstab

    etc/fstab 就是在开机引导的时候自动挂载到linux的文件系统 设备名称 挂载点 分区的类型 挂载选项 dump选项 fsck选项UUID=ce25cdc7-434f-420b-b3 / ex ...

  9. 字符串处理(String)

    字符串类型(String类)需要注意的几个函数: 1.字符串的连接.一般而言,Java不允许运算符直接应用到String对象,唯一的例外是"+"运算符,它用来连接两个字符串,产生一 ...

  10. Ext学习系列(1)初识Ext

    Ext 基础页设置: <!-- 最好不要设置的文件头,避免IE的问题 --><html> <!-- 每份有效的HTML应符合标准,为此head标签不能少 -->&l ...