jquery实现ajax跨域请求

时间：2022-09-12 13:13:14

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)

出现了一个错误，这是因为同源策略给限制了，这是游览器给我们报的一个错

jquery实现ajax跨域请求

(但是注意，项目2中的访问已经发生了，说明是浏览器对非同源请求返回的结果做了拦截。)

jquery实现ajax跨域请求

　　 注意：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就是传的形参

这回访问项目一就取到值了：

jquery实现ajax跨域请求

　　这其实就是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. &lbrack;转载&rsqb;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. GNU Trove trove4j

    GNU Trove (http://trove4j.sourceforge.net/) 是一个Java 集合类库.在某些场景下,Trove集合类库提供了更好的性能,而且内存使用更少.以下是Trove中 ...

  2. 一个端口操作类PortHelper

    此操作类主要使用了系统命令行来实现的,详细的命令可参照微软文档<如何使用"netsh advfirewall firewall"上下文而非“netsh firewall”上下 ...

  3. Andorid中的HAL

    参考文章: http://blog.csdn.net/luoshengyang/article/details/6567257

  4. JavaScript验证

    <script type="text/javascript">    /*密码*/    function password()    {        var pas ...

  5. 如何记录selenium自动化测试过程中接口的调用信息

    上一篇博客,我写了python自动化框架的一些知识和粗浅的看法,在上一篇中我也给自己提出一个需求:如果记录在测试过程中接口的调用情况?提出这个需求,我觉得是有意义的.你在测试过程中肯定会遇到一些莫名其 ...

  6. SDVO-DVI-I2C-register

    关于DVI视频输出口,微软搞了个SDVO用来保护: #define SDVO_OUTPUT_FIRST   (0) #define SDVO_OUTPUT_TMDS0   (1 << 0) ...

  7. some working learning总结学习&lpar;二&rpar;

    2. 读取excel上的测试用例和结果,成json格式,最终存到access数据库 结果如下: { : { 'Req_ID': 'Fqqqqq/qqqqq', 'Case_ID': 'ATC_LvPw ...

  8. BZOJ&period;4241&period;历史研究&lpar;回滚莫队 分块&rpar;

    题目链接 \(Description\) 长度为n的数列,m次询问,每次询问一段区间最大的 \(A_i*tm_i\) (重要度*出现次数) \(Solution\) 好像可以用莫队做,但是取max的操 ...

  9. SecureCRT的脚本&plus;快捷键设置

    场景描述: 每次输入命令对远程svn进行提交非常麻烦,原来SecureCRT有脚本录制函数,类似于Excel的宏录制. 解决方法: 在菜单=>script=>start recording ...

  10. test20190408&lpar;十二省联考&rpar;

    做了十二省联考的题.暂时只更几个比较可做的题目. 异或粽子 考试的时候乱搞了个做法.结果以每个大数据点 \(1900+\ ms\) 的优秀效率通过了此题... 乱搞 建一颗 \(Trie\) 树,显然 ...

相关文章