ajax除了用原生的js实现之外，也可以使用jquery实现，而且用jquery更方便

看一个简单的示例，保留上一篇的content路由和html，实现上一篇一样的功能，点击获取内容，局部刷新

准备一个页面用于被调用

<h1>这是content.html的h1标签</h1>
<p style="background: red">
    这是content.html的p标签，红色
    <a href="https://www.baidu.com/">百度</a>
</p>
<div style="background: blue">这是content.html的div标签，蓝色</div>
<div style="background: yellow" class="my-cls">这是content.html的div标签，黄色</div>

路由

from flask import Flask, render_template, request

app = Flask(__name__, static_url_path='')

@app.route('/content/')
def text_content():
    return render_template('content.html')

请求

方法一：$().load(url, 回调函数)

新建一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax </title>
    {#引入jquery#}
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<button id="btnLoad">点击获取content内容</button>
</body>
</html>
{#指定事件触发时，jquery请求并/content/并加载内容#}
<script>
    $(document).ready(function () {
        $('#btnLoad').click(function () {
            $('#content').load('/content/');
        });
    });
</script>

路由

from flask import Flask, render_template, request

app = Flask(__name__, static_url_path='')

@app.route('/jquery_ajax/')
def jquery_ajax():
    return render_template('ajax-basic.html')

请求

点击

load支持回调函数

load支持筛选渲染，如值渲染div.class=my-cls的标签

只展示p标签下的a标签

方法二：$.get(url, [get参数，可不传], 回调函数)

<script>
    $(document).ready(function () {
        $('#btnGet').click(function () {
            $.get('/content/' , null, function (response) { // 这里的response即get的响应结果
                $('#content').html(response);
            });
        });
    });
</script>

方法三：$.ajax

<script>
    $(document).ready(function () {
        $('#btnAjax').click(function () {
            $.ajax({
                url: '/content/',
                method: 'GET',
                data: null,
                success: function (response) {
                    $('#content').html(response);
                }
            });
        });
    });
</script>

测开之路一百五十二：基于jquery的ajax实现之load、get、ajax的更多相关文章

  1. 测开之路一百五十五：jquery-validation前台数据验证

    前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信 ...

  2. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

  3. 测开之路一百五十三：ajax之load、get、ajax在项目中的体现

    在查询的时候是使用ajax进行请求的 目录结构 personal.models from datetime import datetimefrom flask_sqlalchemy import SQ ...

  4. 测开之路一百五十一：ajax的作用和基本实现原理

    有些情况需要请求和刷新部分资源,但是又不希望整个页面都刷新,这个时候就需要用ajax来处理,即页面的某一部分触发请求和刷新内容 准备两个视图和html from flask import Flask, ...

  5. 测开之路一百四十二：ORM框架之SQLAlchemy建库、建表、数据库操作

    flask-SQLAlchemy是在原生SQLAlchemy的基础之上做了一层封装,安装flask-SQLAlchemy会自动安装SQLAlchemy 安装 传统的sql建表建字段 通过flask-S ...

  6. 测开之路一百三十九：会话管理之cookie写入、读取、和更新

    机制:服务器端发送的小段文本信息存储在客户端硬盘 功能:记录用户偏好,请求.页面.站点间共享信息 特点:易丢失.安全隐患 添加cookie,需要用到make_respons.set_cookie @a ...

  7. 测开之路一百三十八：会话管理之session

    session管理和使用,需要用到flask的session模块和设置安全码:app.secret_key 比如列表页和编辑功能只能给admin用 列表页 编辑页 添加session 登录成功时,把u ...

  8. 测开之路一百一十二：bootstrap按钮

    bootstrap按钮 引入bootstrap和jquery 普通按钮和bootstrap风格按钮 调整大小 块级按钮 禁用按钮 disabled 按钮分组 分页按钮

  9. 测开之路一百二十五：flask之urlencode参数传递和解析

    当get请求传参时,用?分隔参数和域名,用&分隔参数,如果参数里面本身就有&符号就会识别不出来,还是会当成分隔符,所以这些数据在传输的时候,就需要转义,现在普遍是转成urlencode ...

随机推荐

  1. Maven项目构建利器04——Maven的一些核心概念

    1.坐标 1)数学上的坐标: [1].在平面上. 使用X,Y两个向量可以唯一的定位平面上的任意一个点 [2]在空间中, 使用X,Y,Z三个向量可以唯一的定位空间中的任何一个点 2)Maven中的坐标: ...

  2. poj 1664 放苹果（dfs)

    放苹果 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 30284   Accepted: 19098 Description ...

  3. AIX 6.1创建逻辑卷并挂载【smitty】

    1.创建卷组 #mkvg  -y   datavg     hdisk2   hdisk3   #smitty   vg

  4. python模块之导入包及模块发布

    1.导入包(不常用的方法) 在使用python的包时,有时候想直接导入包名,然后通过包名来调用模块,例如: temp为我们创建的一个包,如果我们想通过下面的方式进行导入模块中的方法,将会出错 impo ...

  5. web性能优化--服务器端（二）

    静态资源用CDN部署 添加Expires或者cache-control报文头 Gzip压缩传输文件 配置Etags 使用Get ajax请求 避免空图片src 尽早flush response 减少c ...

  6. 购物网站被p.egou.com强制恶意劫持

    今天早上打开电脑浏览京东,发现随便点击商品,都自动转化为淘客推广的页面, 我以为是360浏览器自己干的,然后我换了谷歌,也是一样,难道这是电脑里面有流氓插件? 我又换了火狐,还是一样,没办法了,换IE ...

  7. 【leetcode】Exchange Seats

    Mary is a teacher in a middle school and she has a table seat storing students' names and their corr ...

  8. Java多线程的创建方法

    Java 线程类也是一个 object 类,它的实例都继承自java.lang.Thread 或其子类. 可以用如下方式用 java 中创建一个线程,执行该线程可以调用该线程的 start()方法: ...

  9. CF718C Sasha and Array 线段树 + 矩阵乘法

    有两个操作: 将 $[l,r]$所有数 + $x$ 求 $\sum_{i=l}^{r}fib(i)$ $n=m=10^5$   直接求不好求,改成矩阵乘法的形式:  $a_{i}=M^x\times ...

  10. C++中string常用函数用法总结

    string(s小写)是C++标准库中的类,纯C中没有,使用时需要包含头文件#include<string>,注意不是<string.h>,下面记录一下string中比较常用的 ...