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. wsl 配置ubuntu apt源为阿里源

    $ sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak $ sudo sed -i 's/security.ubuntu/mirrors.a ...

  2. MinGW 和 MSVC

    在 Winodws 上编译通常会用到这两种工具链 MinGW(Minimalist GNU for Windows) 通常用于跨平台开发,可以编译出在 Windows 系统上运行的 .exe 程序 M ...

  3. 走进Kaggle的未知领域：性别和年龄推断算法解析

    ​ 1.环境设置: 此环节将加载实现笔记本无缝功能的基本模块,包括NumPy.Pandas和TensorFlow等库.此外,它还建立了关键的环境常数,如图像尺寸和学习率,这对后续分析和模型训练至关重要 ...

  4. queryset高级用法：prefetch_related

    这个方法和select_related方法类型,就是访问多个表中的数据的时候,减少查询的次数.这个方法是为了解决一对多和多对多的关系的查询问题.比如要获取标题中带有hello字符串的文章以及它的所有标 ...

  5. github.com/json-iterator/go 详细教程

    最近接触到了 github.com/json-iterator/go , 是由滴滴开源的第三方json编码库,它同时提供Go和Java两个版本. 文中大量内容来自 github 上的 wiki 文档, ...

  6. flutter3-winchat桌面端聊天实例|Flutter3+Dart3+Getx仿微信Exe程序

    首发原创flutter3+bitsdojo_window+getx客户端仿微信exe聊天Flutter-WinChat. flutter3-dart3-winchat 基于flutter3+dart3 ...

  7. Jmeter Jsonpath 语法你了解多少？

  8. 1、dubbo的简介

    Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的,只有在分布式的时候 ...

  9. Linux环境下动态库的生成与使用

    一.动态库的生成 定义 a.h.a.c 如下: a.h #include <stdio.h> #include <stdlib.h> void FuncA(); a.c #in ...

  10. IDEA关联Tomcat（详细教程+安装包）

    IDEA关联Tomcat 下载Tomcat安装包并解压到全英文目录 第一步:打开IDEA--Settings 第二步:搜索application--进入Application Services--点击 ...