前后端数据处理+数据展示分页

ContentType数据编码格式(前后端数据传输)

Urlencoded格式(form表单测试)

对应的数据格式是:name=Jason&password=555

后端获取数据:request.POST

前端使用form表单传输文件

后端显示格式还是key=value对应形式,只显示传输的文件名

form-data(enctype="multipart/form-data")

Form表单传输文件编码格式

后端获取文件格式数据:request.FILES

后端获取普通键值对数据:request.POST

Ajax

前端有哪些方式可以朝后端发送请求

浏览器窗口手动输入网址    get请求

A标签href属性            get请求

Form表单                get、post请求(默认get请求)

Ajax特点:

异步提交

局部刷新

Ajax基本语法(默认传输数据的编码格式也是urlencoded)

提交的地址(url)

提交的方式(type)

提交的数据(data)

回调函数(success)

数据格式:

实验:在web界面三个输入框中在前两个框中输入数字,点击按钮在第三个框中显示计算结果

效果:

在index中添加三个输入框

在后端views中设置,获取几个id的值

Ajax实现后端发送jason格式数据

前端设置、发送指定的数据内容;默认发送的数据是Urlencoded格式的数据,后端是字典形式,想要实现发送jason格式就要前后端一致:

打印出来的数据是jason格式

Ajax传输文件

Form表单与ajax异同点:

1、Form表单不支持异步提交局部刷新

2、Form表单不支持传输jason格式数据

3、Form表单与ajax默认传输数据的编码格式都是urlencoded

通过rom批量插入数据到数据库中去

新建一张表:

更新models

创建表成功:

访问前端页面触发新增数据,展示数据操作:

设置urls访问路径:

设置视图:访问页面触发批量新增数据

设置templates中list页面

一次展示全部数据不方便用户访问,制作一个翻页器,规定每页显示数据数量

前端设置:

类test设置居中

编辑视图

my_page包:

class Pagination(object):
    def __init__(self, current_page, all_count, per_page_num=10, pager_count=5):
        """
        封装分页相关数据
        :param current_page: 当前页
        :param all_count:    数据库中的数据总条数
        :param per_page_num: 每页显示的数据条数
        :param pager_count:  最多显示的页码个数

        用法:
        queryset = model.objects.all()
        page_obj = Pagination(current_page,all_count)
        page_data = queryset[page_obj.start:page_obj.end]
        获取数据用page_data而不再使用原始的queryset
        获取前端分页样式用page_obj.page_html
        """
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1

        if current_page < 1:
            current_page = 1

        self.current_page = current_page

        self.all_count = all_count
        self.per_page_num = per_page_num

        # 总页码
        all_pager, tmp = divmod(all_count, per_page_num)
        if tmp:
            all_pager += 1
        self.all_pager = all_pager

        self.pager_count = pager_count
        self.pager_count_half = int((pager_count - 1) / 2)

    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_num

    @property
    def end(self):
        return self.current_page * self.per_page_num

    def page_html(self):
        # 如果总页码 < 11个:
        if self.all_pager <= self.pager_count:
            pager_start = 1
            pager_end = self.all_pager + 1
        # 总页码  > 11
        else:
            # 当前页如果<=页面上最多显示11/2个页码
            if self.current_page <= self.pager_count_half:
                pager_start = 1
                pager_end = self.pager_count + 1

            # 当前页大于5
            else:
                # 页码翻到最后
                if (self.current_page + self.pager_count_half) > self.all_pager:
                    pager_end = self.all_pager + 1
                    pager_start = self.all_pager - self.pager_count + 1
                else:
                    pager_start = self.current_page - self.pager_count_half
                    pager_end = self.current_page + self.pager_count_half + 1

        page_html_list = []
        # 添加前面的nav和ul标签
        page_html_list.append(‘‘‘
                    <nav aria-label=‘Page navigation>‘
                    <ul class=‘pagination‘>
                ‘‘‘)
        first_page = ‘<li><a href="?page=%s">首页</a></li>‘ % (1)
        page_html_list.append(first_page)

        if self.current_page <= 1:
            prev_page = ‘<li class="disabled"><a href="#">上一页</a></li>‘
        else:
            prev_page = ‘<li><a href="?page=%s">上一页</a></li>‘ % (self.current_page - 1,)

        page_html_list.append(prev_page)

        for i in range(pager_start, pager_end):
            if i == self.current_page:
                temp = ‘<li class="active"><a href="?page=%s">%s</a></li>‘ % (i, i,)
            else:
                temp = ‘<li><a href="?page=%s">%s</a></li>‘ % (i, i,)
            page_html_list.append(temp)

        if self.current_page >= self.all_pager:
            next_page = ‘<li class="disabled"><a href="#">下一页</a></li>‘
        else:
            next_page = ‘<li><a href="?page=%s">下一页</a></li>‘ % (self.current_page + 1,)
        page_html_list.append(next_page)

        last_page = ‘<li><a href="?page=%s">尾页</a></li>‘ % (self.all_pager,)
        page_html_list.append(last_page)
        # 尾部添加标签
        page_html_list.append(‘‘‘
                                           </nav>
                                           </ul>
                                       ‘‘‘)
        return ‘‘.join(page_html_list)

  

原文地址:https://www.cnblogs.com/yangzhaon/p/11032530.html

时间: 2024-10-25 09:35:15

前后端数据处理+数据展示分页的相关文章

基于Ajax技术的前后端Json数据交互方式实现

前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起DNS请求,DNS服务器解析域名后返回域名对应的网站服务器IP地址第二步:浏览器获取IP地址后向网络服务器发送一个HTTP请求第三步:网络服务器解析浏览器的请求后从数据库获取资源,将生成的html文件封装至HTTP 响应包中,返回至浏览器解析 下图抓包显示了访问"www.baidu.com"

编码格式分类: 前后端传递数据的编码格式contentType

urlencoded:form表单和ajax提交数据的默认编码格式 form-data:传文件 application/json:json格式数据 >>> 前后端分离 urlencoded() >>> username=jason&password=123 form-data application/json >>>JsonResponse.string({"name":"jason","pas

一个常见的elementUI表格,从后端获取数据并分页及查询

这个功能是比较常见的,初入门,把几个变量和流程搞清楚. 代码注释很清楚,方便以后优化. 前端主要代码 <template> <div class="page-container"> <!--查询工具栏--> <div class="toolbar" style="float:left;"> <el-form :inline="true" :model="appFi

原生js使用ajax进行简单的前后端的数据交互|js&amp;node&amp;ajax

第一次发布内容,内容简陋请多包含....... 前端html代码: <html> <head> <meta charset="UTF-8"> <title>AJAX 实例</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script> var data="

vue2.0 axios前后端数据处理

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据. 前言: 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入 为了解决这个问题,是在引入 axios 之后,修改原型链具体的实施请往下看~ 改写原型链 首先在 main.js 中引入 axios import a

php中使用ajax进行前后端json数据交互

(最近在学习ajax,所以想自己总结一下在PHP中如何使用ajax技术!) 一.ajax注意点: 1.原理图:(来自韩顺平ajax视频) 2.ajax返回数据类型: 文本,json,xml (1)文本格式: (2)xml: 1 <?php 2 //告诉浏览器返回的是xml类型 3 header("Content-Type:text/xml;charset=utf-8"); 4 5 6 7 8 ?> 前端如何取出: xmlrequest.responseXml();//返回的

web前后端数据交互

前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个list.js来说明后端是如何将数据传到前端,前端是如何获取数据,并进行数据展示的. /** * 列表方法 * 1.列表页面显示列表内容的div容器ID为list_container * 2.列表页面模板区域textarea的ID为list_template * 3.列表页面显示列表页码下拉框的div容

【springMVC】简单的前后端数据交流

最最常见两种,一则返回视图模板(文档),二则为json数据.就使用一个源代码文件来看看springmvc是怎么做到的. 1.UserController.java源代码文件 (这里额外的使用了fastjson架包来将对象解析为json) package com.zay; import com.alibaba.fastjson.JSON; import org.springframework.stereotype.Controller; import org.springframework.web

Spring MVC前后端数据交互总结

控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是servlet的替代品. - append Spring MVC在Web应用中扮演V的角色,负责处理HTTP请求并返回相应的资源,它在用的时候要配置一个核心的Dispatcher负责检查资源,请求过来的时候会查找是否有相应的Handler,有就会把请求交给Controller,一般使用注解来配置暴露给用户