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. fastdfs存储和下载过程

  2. iOS 面向对象与类

    至于未来会怎样,要走下去才知道反正路还很长,天总会亮. 1. 面向对象 1.1 什么是面向对象(OOP) 面向对象 Object Oriented Programming.在软件开发中,我们虽然用的是 ...

  3. ZYNQ核心板及其底板开源啦！

    Hello-FPGA ZYNQ 设计开源啦! 开源ZYNQ核心板 + 底板 硬件设计.软件设计,软件设计使用裸机演示,演示了如何使用AXI DMA等关键dma 模块 欢迎加QQ 讨论 94755958 ...

  4. 【苹果】SpringBoot监听Iphone15邮件提醒，Selenium+Python自动化抢购脚本

    前言 缘由 Iphone15来了,两年之约你还记得吗? 遂整合之前iphone13及iphone14的相关抢购代码,完成一个SpringBoot监听Iphone15有货邮件提醒+python自动化脚本 ...

  5. Redis队列优先级的实现方案

    场景 通常使用 list 来实现队列操作,所有的任务统一都是先进先出的原则,如果想优先处理某个任务就不太合适,这个时候就需要让队列有优先级的概念,实现方式有以下两种方式: 单一列表实现 队列正常的操作 ...

  6. vue开发过程常用的JSX语法

    参考资料:https://juejin.cn/post/7114063575122984973 在Vue项目的开发过程,经常会使用到JSX语法,对常用的JSX语法分类做个笔记,方便需要之时查阅 动态绑 ...

  7. mysql标识列和事务

    1 #标识列 2 /* 3 又称为自增长列 4 含义:可以不用手动的插入值,系统提供默认的序列值 5 6 7 特点: 8 1.标识列必须和主键搭配吗?不一定,但要求是一个key 9 2.一个表可以有几 ...

  8. XAF Blazor FilterPanel 布局样式

    从上一篇关于ListView布局样式的文章中,我们知道XAFBlazor是移动优先的,如果想在PC端有更好的用户体验,我们需要对布局样式进行修改.这篇介绍在之前文章中提到的FilterPanel,它的 ...

  9. openlayers.org 百度地图 静态化 同类产品

    openlayers 官网 https://openlayers.org/ 发现不好打开,修改dns 114.114.114.114 202.99.104.68 打开快了许多 https://blog ...

  10. if (ctx.ifTo(ctx.property, next)) return

    if (ctx.ifTo(ctx.property, next)) return if (ctx.ifGoto(ctx.property, 'functionName')) return 试试 a & ...