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. mongodb(2022)

    了解 文档数据库MongoDB用于记录文档结构的数据,如JSON.XML结构的数据.一条文档就是一条记录(含数据和数据结构),一条记录里可以包含若干个键值对.键值对由键和值两部分组成,键又叫做字段.键 ...

  2. gin框架中的c.Next()/c.Abort()

    package main import ( "fmt" "github.com/gin-gonic/gin" ) func func1(c *gin.Conte ...

  3. 用random.simple来解决从0-99这100个数中随机取10个不重复的数

    语法: random.simple(list,k) 返回以长度为k的新列表,新列表存放list所产生k个随机不重复的元素 import random print(random.simple(range ...

  4. 【Azure App Service for Linux】Linux Web App如何安装系统未安装的包

    问题描述 Linux Web App中如何安装系统默认未安装的包,如何来执行如 apt install XXX命令呢?现在遇见的问题时,通过Azure App Service门户中的SSH登录后,执行 ...

  5. 【Azure Developer】使用 Azure Python 查看 Azure 所有的 Alert rule

    问题描述 在Azure Alert 门户中,可以列举出所有Azure资源的Alert rule信息,如下图: 如果像通过Python SDK来获取所有的Alert Rule,有什么可以参考的代码吗? ...

  6. Nebula Graph 源码解读系列 ｜ Vol.02 详解 Validator

    整体架构 Nebula Graph Query Engine 主要分为四个模块,分别是 Parser.Validator.Optimizer 和 Executor. Parser 完成对语句的词法语法 ...

  7. 青少年CTF训练平台-web部分随笔

    文章管理系统 首先打开环境(>ω<｡人)ZZz♪♪ 既然要做题,就要做全面了,图上说了,既然有假flag我就先找出来: 假flag: 打开vmware,使用sqlmap进行处理: sqlm ...

  8. Acwing第132场周赛

    AcWing 5366. 大小写转换 签到题,可以用stl里面的tolower函数 #include <bits/stdc++.h> #define ls p<<1 #defi ...

  9. C语言趣味编程之三天打鱼两天晒网

    include <stdio.h> typedef struct date {//定义一个日期结构体date,三个成员变量year\month\day,使得年月日作为一个整体,相互联系. ...

  10. matlab修改读取mat文件后的变量名

    代码如下: %% str1=load('CH1.mat'); val_names = fieldnames(str1); % 获取结构体后那个未知的变量名 data1 = getfield(str1, ...