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 - SetWinEventHook的用法

    #include <Windows.h> #include <iostream> #include <thread> #include <tchar.h> ...

  2. linux和unix中的IO模型总结

    高性能网络IO编程模型 一.I/O模型简介 在一个 linux 操作系统中,一般分为用户空间和内核空间. 用户空间一般就是我们进行应用程序编程的地方. 内核空间就是 linux 操作系统自己运行的一些 ...

  3. CentOS7安装Chrome及驱动

    目录 安装Chrome 更新Chrome 安装Chrome驱动程序 更新Chrome驱动程序 环境:CentOS Linux release 7.4.1708 (Core) 安装Chrome 下载安装 ...

  4. 【Azure Cloud Services】云服务频繁发生服务器崩溃的排查方案

    问题描述 云服务(Cloud Services)在使用期间,频繁发生崩溃事件,在崩溃期间,查看CPU负载为100%,而且同时伴随以下情况: 部署在云服务上的应用无法访问 远程连接云服务实例(RDP)访 ...

  5. Nebula Graph 1.0 Release Note

    Nebula Graph 1.0 发布了.作为一款开源分布式图数据库,Nebula Graph 1.0 版本旨在提供一个安全.高可用.高性能.具有强表达能力的查询语言的图数据库. 基本功能 DDL & ...

  6. 问答：C程序为何for循环和while循环无法相互替代？

    百鸡百钱问题: C代码: include <stdio.h> main() { int cock, hen, chicken; for(cock=0;cock<=20;cock++) ...

  7. TLS原理与实践（三）tls1.3

    主页 个人微信公众号:密码应用技术实战 个人博客园首页:https://www.cnblogs.com/informatics/ 引言 tls1.2作为主流的网路安全协议,被广泛应用,但tls1.2仍 ...

  8. python 创建文件夹并写入文件源码

    废话就不多少说了,直接上源码吧. import time import os folder = os.getcwd() folder = folder + '/test/' print(folder) ...

  9. 在salesforce中如何获取Security Token

    Trailhead练习Soap API使用Soap UI时,需要Security Token才能登录,在Lightning一直找不到,后来切换到Classic才找到.现在提供一个简单粗暴的方式,快速定 ...

  10. PRD（产品需求文档）与SRS（软件需求规格说明书）的区别

    需求分析是软件开发过程中很重要的一个环节,目前需求分析完成后输出的文档有2种体系,一个是SRS(Software Requirements Specification,软件需求规格说明书),一个是PR ...