Python全栈 Web(Ajax JQuery-AJAX 跨域请求)

简介: Flask、Python、Django、框架、服务器、客户端、浏览器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式开发


jQuery对AJAX的支持
$.ajax()
语法:
$.ajax({请求参数的json对象});
请求参数对象的属性:
URL:字符串 表示异步请求地址
type:字符串 请求方式 get或post
date:传递到服务端的参数 参数字符串("name=dfh&age15")或json
datetype:响应回来的数据格式
HTML
xml
text
script
json
jsonp:有关跨域的响应了格式
success:
回调函数 响应成功后的回调函数
error:
回调函数 请求或响应失败时的回调函数
beforSend:
回调函数 发送AJAX请求之前的回调函数
如果return False 则终止请求发送


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <h1>静态网页</h1>

    <p>
        uname <input type="text" id="uname">
    </p>
    <button id="btnajax">查询</button>
    <p id="show"></p>
    <script>
        $(function () {
            $("#btnajax").click(function () {
                // 使用get请求发送一个uname参数 到服务器
                $.ajax({
                    // 请求地址
                    url: "/05-server1",
                    // 请求方式
                    type: "get",
                    // 请求参数
                    data: "uname=" + $("#uname").val(),
                    // 响应回来的数据格式
                    dataType: 'json',
                    // 请求和响应后的回调函数
                    success: function (data) {
                        if (data.id){
                            // 如果data中有ID属性 说明查询成功
                            var html = "";
                            html += "<h3> id:" + data.id + "</h3>";
                            html += "<h3> uname:" + data.uname + "</h3>";
                            html += "<h3> upwd:" + data.upwd + "</h3>";
                            html += "<h3> realname:" + data.realname + "</h3>";

                        } else {
                            // 否则查询失败
                            html += "<h3>" + data.msg + "</h3>";
                        }
                        $("#show").html(html)
                    }
                });
            });
        });
    </script>
</body>
</html>



@app.route("/05-server1")
def server_05_views():
    uname = request.args.get("uname")
    u = Users.query.filter_by(uname=uname).first()
    if u:
        return json.dumps(u.to_dict())
    dic = {
        "status": "0",
        "msg": "not username"
    }
    return json.dumps(dic)


跨域(Cross Domain)
什么是跨域?
HTTP协议中有一个策略 "同源策略"
同源:
多个地址中 相同的协议 相同的域名 相同的端口
在HTTP中 必须是同源地址中 必须是同源地址才能相互
发送请求 非同源拒绝请求(<script>和<img>除外)

非同源的网页相互发送请求的过程就是跨域
跨域只能接受GET请求 不能接受POST请求
跨域解决方案:
通过<script>标记向服务器发送请求
由服务器资源指定前端页面的那个方法来执行响应的数据
jQuery的跨域:
jsonp json with padding
$.ajax({
url:"xxx",
type: "get",
dataType:'jsonp', //指定跨域访问
jsonp: "callback", //定义了callback函数名 以便于callback传递过去的函数名
jsonpCallback:'xxx' //定义了传递过去函数的名字 jsonp的回调函数
});



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <button id="btn">跨域请求</button>
    <div id="show"></div>
    <script>


        function show(data){
            console.log(data);
        }

        $(function () {
           $("#btn").click(function () {
               // 无法完成跨域访问
               // var url = "http://127.0.0.1:5000/06-server"
               // $.get("/06-server", function (data) {
               //     $("#show").html(data)
               // });

               // 原生js完成跨域请求
               // 获取body标记
               var body = document.getElementsByTagName("body")[0];
               // 动态创建script标记
               // 通过script请求响应回来的数据一律当成js脚本来执行
               var script = document.createElement("script");
               // 设置script的type属性  可以省略
               script.type = "text/javascript";
               // 网络请求地址
               // callback 参数告诉后端 前端处理响应数据的函数名
               script.src = "http://127.0.0.1:5000/06-server?callback=show";
               // 将标记追加到当前页面  也就是向src的地址发送请求同时接受响应数据
               // 响应数据直接交给了页面 页面将响应数据当成js脚本程序执行
               body.append(script);
           });
        });
    </script>
</body>
</html>



@app.route("/06-server")
def server_06():
    # 接受前端传递过来的数据 也就是前端自定义的函数名
    fun = request.args.get("callback")
    # 响应数据 被前端当成js脚本执行
    return fun + "('server 06')"





三种形式的跨域请求



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <button id="btnShow">显示</button>
    <div id="show"></div>
    <script>
        function flight(data) {
            html = "";
            html += "<h3> 航班  " + data.flight + "</h3>";
            html += "<h3> 出发  " + data.from + "</h3>";
            html += "<h3> 到达  " + data.to + "</h3>";
            html += "<h3> 时间  " + data.time + "</h3>";
            $("#show").html(html);
        }
        $(function () {
           $("#btnShow").click(function () {
               // 原生跨域请求
               // var body = document.getElementsByTagName("body")[0];
               // var script = document.createElement("script");
               // script.type = "text/javascript";
               // script.src = "http://127.0.0.1:5000/07-server?callback=flight";
               // body.append(script);

               // jQuery跨域请求 jsonp
               // $.ajax({
               //     url: "http://127.0.0.1:5000/07-server",
               //     type: "get",
               //     dataType: "jsonp",
               //     jsonp: "callback",
               //     jsonpCallback: "flight"
               // });

               // jQuery跨域请求 jsonp
               $.ajax({
                   url:'http://127.0.0.1:5000/07-server',
                   type:'type',
                   dataType:'jsonp',
                   success:function (data) {
                       console.log(data.flight);
                       console.log(data.from);
                       console.log(data.to);
                       console.log(data.time);

                   }
               });

           });
        });
    </script>


</body>
</html>






@app.route("/07-server")
def server_07():
    cb = request.args.get("callback")
    dic = {
        "flight": "MU763",
        "from": "beijing",
        "to": "saipan",
        "time": "16:55"
    }
    return cb + "(" + json.dumps(dic) + ")"


相关文章
|
20天前
|
Web App开发 前端开发 JavaScript
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
70 5
|
1天前
|
JSON API 数据格式
如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架
本文介绍了如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架,适合小型项目和微服务。文章从环境准备、创建基本Flask应用、定义资源和路由、请求和响应处理、错误处理等方面进行了详细说明,并提供了示例代码。通过这些步骤,读者可以快速上手构建自己的RESTful API。
9 2
|
3天前
|
Kubernetes 网络协议 Python
Python网络编程:从Socket到Web应用
在信息时代,网络编程是软件开发的重要组成部分。Python作为多用途编程语言,提供了从Socket编程到Web应用开发的强大支持。本文将从基础的Socket编程入手,逐步深入到复杂的Web应用开发,涵盖Flask、Django等框架的应用,以及异步Web编程和微服务架构。通过本文,读者将全面了解Python在网络编程领域的应用。
6 1
|
3天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
12 1
|
11天前
|
JSON 搜索推荐 API
Python的web框架有哪些?小项目比较推荐哪个?
【10月更文挑战第15天】Python的web框架有哪些?小项目比较推荐哪个?
31 1
|
14天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
Python Web框架比较:Django vs Flask vs Pyramid
16 4
|
16天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
【10月更文挑战第10天】本文比较了Python中三个最受欢迎的Web框架:Django、Flask和Pyramid。Django以功能全面、文档完善著称,适合快速开发;Flask轻量灵活,易于上手;Pyramid介于两者之间,兼顾灵活性和安全性。选择框架时需考虑项目需求和个人偏好。
25 1
|
22天前
|
SQL 关系型数据库 数据库
优化Web开发流程:Python ORM的优势与实现细节
【10月更文挑战第4天】在Web开发中,数据库操作至关重要,但直接编写SQL语句既繁琐又易错。对象关系映射(ORM)技术应运而生,让开发者以面向对象的方式操作数据库,显著提升了开发效率和代码可维护性。本文探讨Python ORM的优势及其实现细节,并通过Django ORM的示例展示其应用。ORM提供高级抽象层,简化数据库操作,提高代码可读性,并支持多种数据库后端,防止SQL注入。Django内置强大的ORM系统,通过定义模型、生成数据库表、插入和查询数据等步骤,展示了如何利用ORM简化复杂的数据库操作。
53 6
|
20天前
|
安全 数据库 C++
Python Web框架比较:Django vs Flask vs Pyramid
【10月更文挑战第6天】本文比较了Python中三个最受欢迎的Web框架:Django、Flask和Pyramid。Django功能全面,适合快速开发;Flask灵活轻量,易于上手;Pyramid介于两者之间,兼顾灵活性和可扩展性。文章分析了各框架的优缺点,帮助开发者根据项目需求和个人偏好做出合适的选择。
27 4
|
23天前
|
Web App开发 XML JavaScript
Python 操作浏览器:让 Python 和 Web 世界合二为一
Python 操作浏览器:让 Python 和 Web 世界合二为一
30 3