05 Ajax请求（扩展，延伸）

首先, 我们用Flask创建一个后台服务器(自己做网站了哈)

目录结构:

服务端：

from flask import Flask, render_template, request  # pip install Flask

app = Flask(__name__)

@app.route("/")

def index():

    # 跳转到首页

    print("你曾经来过服务器")

    name = "zzc"

    # 数据是在这里渲染后, 返回个客户端的html

    return render_template("index.html", name=name)  

if __name__ == '__main__':

    app.run()

html页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/js/jquery.js"></script>

</head>

<body>

    我就是一个传统的html页面, 我的名字是{{name}}

</body>
1. 发送get请求

接下来. 我们使用jquery来发送ajax.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/js/jquery.js"></script>

    <script>

        function setCookie(name, value) {

            let Days = 30;

            let exp = new Date();

            exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);

            document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();

        }

        $(function(){

            // 可以在js任意位置设置cookie信息

            setCookie("name", "i-have-a-dream")

            $(".get_btn").click(function(){

                $.ajax({

                    url:"/ajax_get", // 服务器地址: 域名+url

                    method:'get',  // 发送get请求

                    headers:{  // 添加请求头信息

                        "token":"mememmememe",

                    },

                    data:{   // 传递参数

                        name:'alex',

                        _: new Date().getTime()

                    },

                    contentType:'application/json;charset=utf8',

                    beforeSend: function(req){  // 也可以这样添加请求头信息

                        req.setRequestHeader("tokken", "i-can-do-it-haha");

                    },

                    success: function(back){  // 请求成功后. 返回数据了. 要做什么?

                        console.log(back);

                    }

                });

            })

        })

    </script>

</head>

<body>

    我就是一个传统的html页面, 我的名字是{{name}}

    <br/>

    <input type="button" class="get_btn" value="点我发送get_请求">

    <hr/>

    <a href="javascript:void(0);" class="post_btn" >点我发送post_请求</a>

</body>

</html>

服务器处理ajax_get请求:

@app.route("/ajax_get")

def ajax_get_req():

    # 接收cookie中的信息

    n = request.cookies.get('name')

    if not n:

        return "没有cookie就不要来了."

    # 接收header中的信息

    token = request.headers.get('token')

    if not token:

        return "没token还想来?"

    # Flask接收get请求的参数

    name = request.args.get('name')

    _ = request.args.get('_')

    if name and _:

        # 返回json

        return {"name":'alex', "id": 10086, "isMen": True}

    else:

        return "回家去吧"
2. 发送post请求(json)
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/js/jquery.js"></script>

    <style>

        #mask{

            position:fixed;

            top:0;

            left:0;

            right:0;

            bottom: 0;

            background-color: rgba(0,0,0, .3);

            color: #fff;

            font-size:30px;

            text-align: center;

            padding-top:300px;

            display:none;

        }

    </style>

    <script>

        $(function(){

            $(".post_btn").click(function(){

                $('#mask').css("display","block");

                $("#data_tbody").remove();

                $.ajax({

                    url:'/ajax_post',

                    method:'post',

                    data: JSON.stringify({

                        name:'alex',

                        id:'10086'

                    }),

                    headers: {  // 发送json数据. 要换这个头, 否则服务器收不到数据

                        "Content-Type": "application/json;charset=utf-8"

                    },

                    dataType:"text",

                    success:function(d){

                        $('#mask').css("display","none"); // 设置不遮罩

                        let data = JSON.parse(d);

                        let tbody = $("<tbody id='data_tbody'></tbody>")

                        data.forEach(function(item){

                            let tr = `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.age}</td></tr>`;

                            tbody.append(tr);

                        });

                        $('table').append(tbody);

                    }

                })

            });

        })

    </script>

</head>

<body>

    我就是一个传统的html页面, 我的名字是{{name}}

    <br/>

    <input type="button" class="get_btn" value="点我发送get_请求">

    <hr/>

    <a href="javascript:void(0);" class="post_btn" >点我发送post_请求_加载一个表格试试</a>

    <hr/>

    <table width="80%" border="1">

        <thead>

        <tr>

            <td>id</td>

            <td>name</td>

            <td>age</td>

        </tr>

        </thead>

    </table>

    <div id="mask"><span>正在加载中......</span></div>

</body>

</html>

python服务器:

from flask import Flask, render_template, request  # pip install Flask

import time

import json

app = Flask(__name__)

@app.route("/")

def index():

    # 跳转到首页

    print("你曾经来过服务器")

    name = "alex"

    return render_template("index.html", name=name)  # 数据是在这里渲染后, 返回个客户端的html

@app.route("/ajax_post", methods=['POST'])

def ajax_get_post():

    # time.sleep(3)

    # 接收JSON数据

    print(request.json)

    lst = [

        {"id": 1, "name": "张飞", "age": 16},

        {"id": 2, "name": "刘备", "age": 16},

        {"id": 3, "name": "关羽", "age": 16},

        {"id": 4, "name": "吕布", "age": 16},

    ]

    return json.dumps(lst)

if __name__ == '__main__':

    app.run()

05 Ajax请求（扩展，延伸）的更多相关文章

  1. 一起来做chrome扩展《AJAX请求》

    chrome在一次更新之后,出于安全考虑,完全的禁止了content_script从https向http发起ajax请求,即使正常情况下也会在console里给出提示.这对于WEB来讲是好事,但对于扩 ...

  2. [js开源组件开发]network异步请求ajax的扩展

    network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loadin ...

  3. 黄聪：chrome扩展开发《AJAX请求》

    chrome在一次更新之后,出于安全考虑,完全的禁止了content_script从https向http发起ajax请求,即使正常情况下也会在console里给出提示.这对于WEB来讲是好事,但对于扩 ...

  4. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  5. Bootstrap_Datatable Ajax请求两次问题的解决

    最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...

  6. 想抛就抛：Application_Error中统一处理ajax请求执行中抛出的异常

    女朋友不是想抛就抛,但异常却可以,不信请往下看. 今天在MVC Controller中写代码时,纠结了一下: public async Task<ActionResult> Save(in ...

  7. 如何在Global.asax中判断是否是ajax请求

    今天在一个应用场景中需要在Global.asax中判断一个请求是否是ajax请求,而在ASP.NET MVC中已经提供了一个现成的扩展方法IsAjaxRequest: namespace System ...

  8. 采用指数退避算法实现ajax请求的重发，全部完成时触发回调函数

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  9. zepto源码学习-05 ajax

    学习zeptoajax之前需要先脑补下,强烈推荐此文http://www.cnblogs.com/heyuquan/archive/2013/05/13/js-jquery-ajax.html 还有A ...

  10. ［开源］jquery-ajax-cache：快速优化页面ajax请求，使用localStorage缓存请求

    项目:jquery-ajax-cache 地址:https://github.com/WQTeam/jquery-ajax-cache     最近在项目中用到了本地缓存localStorage做数据 ...

随机推荐

  1. win32 - wsprintfW的使用

    文档:将格式化的数据写入指定的缓冲区.根据格式字符串中相应的格式说明,将转换任何参数并将其复制到输出缓冲区.该函数在其写入的字符后附加一个终止空字符,但返回值的字符计数中不包含终止空字符. 例子: # ...

  2. 常用SQL语句备查

    查询表中某一列是否有重复值 SELECT bizType, COUNT(bizType) FROM Res GROUP BY bizType HAVING COUNT(bizType) > 1 ...

  3. logback 常用配置（详解）

    转自:https://blog.csdn.net/qq_36850813/article/details/83092051 官方文档参考:https://logback.qos.ch/manual/a ...

  4. Generating equals/hashCode implementation but without a call to superclass

    Generating equals/hashCode implementation but without a call to superclass1.lombok 警告,没有注入父类的字段当我们给一 ...

  5. vue 前端自动打开文件地址进行下载

    最近在做异步导出的功能,导出的过程中前端另外启动一个查询导出进度的线程接口.如果导出完成后,把生成的文件上传到服务器,返回给前端一个文件的下载地址:前端自动打开这个地址进行跳转下载. 有两种方式 1. ...

  6. Excel 求和函数结果一直为零

    参考资料:Excel表格求和结果总是0怎么办 用SUMIFS函数求和,结果都是零 错误原因: 1.单元列数据格式设置错误,参考资料一 2.数据中含有空格或者回车键或者隐藏字符,参考资料二 解决方法: ...

  7. JVM-对象实例化

    JVM-对象实例化 1.创建对象的方式 new:最常见的方式.Xxx的静态方法,XxxBuilder/XxxFactory的静态方法 Class的newInstance方法:反射的方式,只能调用空参的 ...

  8. 【webserver 前置知识 02】Linux网络编程入门其一

    网络结构模式 C/S结构 服务器 - 客户机,即 Client - Server(C/S)结构.C/S 结构通常采取两层结构.服务器负责数据的管理,客户机负责完成与用户的交互任务.客户机是因特网上访问 ...

  9. 【Azure 应用服务】本地Node.js部署上云(Azure App Service for Linux)遇到的三个问题解决之道

    问题描述 当本地Node.js(Linux + Node.js + npm + yarn)部署上云,选择 Azure App Service for Linux 环境.但是在部署时,遇见了以下三个问题 ...

  10. 16 Educational Codeforces Round 142 (Rated for Div. 2)C. Min Max Sort（递归、思维、dp）

    C. Min Max Sort 很不错的一道题目,不过脑电波和出题人每对上,\(qwq.\) 正难则反. 我们考虑最后一步是怎么操作的. 最后一步一定是对\(1\)和\(n\)进行操作 那么上一步呢? ...