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. Python 列表元素里面含有字典或者列表进行排序

    示例1:列表里面含有列表进行排序 s = [[1, 2], [100, 2], [33, 3], [25, 6]] s.sort(key=lambda k: k[0]) print(s) 结果: [[ ...

  2. JavaScript中实现li向上轮播

    在网上找了很久,没有找到合适的模板,其实我这个也是公司用的,希望以后也能复用,节省时间 function scrollAuto(scrollBox, list){//两个参数分别填列表的ul的clas ...

  3. centos7 mysql 各种报错

    1.重置root密码 vi /etc/my.cnf 添加skip-grant-tables service mysqld restart 2.mysql 登录 报错1 Unknown system v ...

  4. 5月Linux市场Steam 份额在增长

    随着新的一个月的开始,Valve公布了上个月的软件/硬件调查数据.在2019年5月,Steam Linux的使用率按百分比略微上升. 上个月,运行Linux的Steam用户比例(根据有争议的Steam ...

  5. [转载]Ethernet,Half-Duplex/Full-Duplex,CSMA

    原文地址:Ethernet,Half-Duplex/Full-Duplex,CSMA/CD,Auto-Negotiation作者:心田麦浪 CSMA/CD(Carrier Sense Multiple ...

  6. Codeforces 899 1-N两非空集合最小差 末尾最多9对数计算 pair/链表加优先队列最少次数清空

    A /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a)) #define pb push_bac ...

  7. source insight支持查看makefile、kconfig以及.s代码方法

    在用sourceinsight查看linux内核源码的时候,大家会发现不能查看源码中的makefile和kconfig代码,即不能搜索到makefile和kconfig文件.这是因为source in ...

  8. DevExpress Winforms Controls：安装使用系统要求文档

    [DevExpress WinForms v19.1下载] 本文档包含了有关安装和使用DevExpress WinForms控件的系统要求信息. .NET Framework 下图展示了支持的.NET ...

  9. Shiro（二）

    1 Shiro的授权 1.1 授权流程 1.2 授权方式 shiro支持三种方式的授权 1.2.1 编程式 通过编写if/else完成授权代码. if(subject.hasRole("ro ...

  10. 【NOIP2016提高A组模拟8.17】(雅礼联考day1)Binary

    题目 分析 首先每个数对\(2^i\)取模.也就是把每个数的第i位以后删去. 把它们放进树状数组里面. 那么当查询操作, 答案就位于区间\([2^i-x,2^{i-1}-1-x]\)中,直接查询就可以 ...