12-Django项目--Ajax请求三

news2024/7/2 21:46:38

目录

路由

添加与编辑

 视图函数

 perform_list.html


路由

添加与编辑

 视图函数

 

 perform_list.html

{% endblock %}

{% block js %}
    <script>
        var DELETE_ID = undefined;
        var MODIFY_ID = undefined;
        $(function () {
            bindBtnAdd();
            bindBtnSave();
            bindBtnDelete();
            bindBtnDeleteContent();
            BindBtnModifyContent();
        })

        function bindBtnAdd() {
            $("#btnAdd").click(function () {
                $("#myModal").modal("show")
            })
        }

        function bindBtnSave() {
            {#console.log(MODIFY_ID)#}
            $("#btnSave").click(function () {
                if (MODIFY_ID) {
                modifyContent();
            } else {
                addContent()
            }
            })
        }


        // 编辑信息
        function modifyContent() {
            $.ajax({
                url:"/parform/content/modify/" + "?uid=" + MODIFY_ID,
                type:"post",
                data:$("#formAdd").serialize(),
                dataType:"JSON",
                success:function (res) {
                    if (res.status){
                        alert("修改成功");
                        // 清空内容
                        $("#formAdd")[0].reset();
                        $("#myModal").modal("hide");
                        location.reload();
                    } else {
                        $.each(res.error(),function (name,data) {
                            $("#id_"+name).next().text(data[0])
                        })
                    }

                }
            })
        }

        // 添加信息
        function addContent() {
            $.ajax({
                url: "/parform/add/",
                type: "post",
                data: $("#formAdd").serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        // 关闭窗口
                        $("#myModal").modal("hide");
                        location.reload();
                    } else {
                        $.each(res.error, function (name, data) {
                            $("#id_" + name).next().text(data[0])
                        })
                    }
                }
            })
        }


        function bindBtnDelete() {
            $(".btn-delete").click(function () {
                $("#btnDelete").modal("show");
                {#console.log($(this).attr("uid"))#}
                DELETE_ID = $(this).attr("uid")
            })
        }

        function bindBtnDeleteContent() {
            $("#contentDelete").click(function () {
                $.ajax({
                    url: "/parform/delete/",
                    type: "get",
                    dataType: "JSON",
                    data: {uid: DELETE_ID},
                    success: function (res) {
                        if (res.status) {
                            $("#btnDelete").modal("hide");
                            //删除对应的tr标签
                            {#$("tr[uid='" + DELETE_ID + "']").remove(),#}
                            location.reload()
                        }
                    }

                })
            })
        }

        function BindBtnModifyContent() {
            $(".btn-modify").click(function () {
                var uid = $(this).attr("uid");
                $.ajax({
                    url: "/parform/modify/",
                    type: "get",
                    data: {
                        uid: uid
                    },
                    success: function (res) {
                        if (res.status) {
                            {#console.log(res.data)#}
                            $.each(res.data, function (name, data) {
                                $("#id_" + name).val(data);
                            });
                            // 将添加信息改为编辑信息
                            $("#myModalLabel").text("编辑信息");
                            $("#myModal").modal("show");
                        } else {
                            alert("当前数据不存在了")
                        }
                    }
                })
                MODIFY_ID = uid;
                {#console.log(MODIFY_ID)#}
            })
        }
    </script>
{% endblock %}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1880416.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机基础之汇编语言学习笔记

学习来源&#xff1a;b站各种学习资料 前置知识&#xff1a;计算机组成原理等知识 学习参考的资源 汇编语言编程的速成指南[上]~从零开始的期末抢救计划 &#xff08;8086汇编&#xff09;_哔哩哔哩_bilibili 链接: https://pan.baidu.com/s/1tg_ZW7VD3TS_s1v_EjS89w?pwdak6…

Android:移动垃圾软件

讲解政策相关,最近升级AI扫荡系统和证书防高风险,回复按留言时间来排,请耐心等待 移动垃圾软件 官方政策公告行为透明、信息披露清晰保护用户数据不要损害移动体验软件准则反垃圾软件政策Google API 服务用户数据政策官方政策公告 ​ 在 Google,我们相信,如果我们关注用户…

vue2实例实现一个初步的vuex

vue2实例实现一个初步的vuex 实现源码&#xff1a;vue2-review 1.App.vue 2.store目录下的index.js 3.效果 微信公众号&#xff1a;刺头拾年

Crontab命令详解:轻松驾驭Linux定时任务,提升系统效率

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 引言&#xff1a; crond是Linux系统中用来定期执行命令或指定程序任务的一种服务或软件…

NzN的C++之路--拷贝构造函数赋值运算符重载

目录 Part 1 拷贝构造函数 一、概念 二、特征 Part 2 赋值运算符重载 一、运算符重载 二、赋值运算符重载 三、前置和后置重载 Part 3 const成员 Part 4 取地址及const取地址操作符重载 Part 1 拷贝构造函数 一、概念 拷贝构造函数&#xff1a;只有单个形参&#xf…

LeetCode 全排列

思路&#xff1a;这是一道暴力搜索问题&#xff0c;我们需要列出答案的所有可能组合。 题目给我们一个数组&#xff0c;我们很容易想到的做法是将数组中的元素进行排列&#xff0c;如何区分已选中和未选中的元素&#xff0c;容易想到的是建立一个标记数组&#xff0c;已经选中的…

AI模型的奥运会:谁将在OlympicArena中夺冠?

获取本文论文原文PDF&#xff0c;请在公众号【AI论文解读】留言&#xff1a;论文解读 引言&#xff1a;AI模型的奥林匹克级评测 评估和比较不同AI模型的性能始终是一个核心话题。随着技术的不断进步&#xff0c;这些模型在处理复杂任务的能力上有了显著的提升。为了更精确地衡…

Nacos-注册中心

一、注册中心的交互流程 注册中心通常有两个角色: 服务提供者(生产者)&#xff1a;对外提供服务的微服务应用。它会把自身的服务地址注册到注册中心&#xff0c;以供消费者发现和调用。服务调用者(消费者)&#xff1a;调用其他微服务的应用程序。它会向注册中心订阅自己需要的服…

Python | Leetcode Python题解之第188题买卖股票的最佳时机IV

题目&#xff1a; 题解&#xff1a; class Solution:def maxProfit(self, k: int, prices: List[int]) -> int:if not prices:return 0n len(prices)k min(k, n // 2)buy [0] * (k 1)sell [0] * (k 1)buy[0], sell[0] -prices[0], 0for i in range(1, k 1):buy[i] …

【计算机图形学 | 基于MFC三维图形开发】期末考试知识点汇总(上)

文章目录 视频教程第一章 计算机图形学概述计算机图形学的定义计算机图形学的应用计算机图形学 vs 图像处理 vs模式识别图形显示器的发展及工作原理理解三维渲染管线 第二章 基本图元的扫描转换扫描转换直线的扫描转换DDA算法Bresenham算法中点画线算法圆的扫描转换中点画圆算法…

安全和加密常识(6)Base64编码方式

文章目录 什么是 Base64编码原理编解码示例应用什么是 Base64 Base64 是一种用于将二进制数据编码为仅包含64种ASCII字符的文本格式的编码方法,注意,它不是加密算法。它设计的目的主要是使二进制数据能够通过只支持文本的传输层(如电子邮件)进行传输。Base64常用于在需要处…

音频接口电路的PCB设计

Audio接口是音频插孔&#xff0c;即音频接口&#xff0c;可分为Audio in接口和Audio out接口。音频接口是连接麦克风和其他声源与计算机的设备&#xff0c;其在模拟和数字信号之间起到了桥梁连接的作用。对于平台的数字音频接RK3588口&#xff0c;需遵循《Rockchip RK3588 High…

RTMP推流到SRS流媒体服务器消息处理

RTMP推流到SRS流媒体服务器消息处理 SRS和客户端是怎么交换消息的&#xff1f;各个消息有什么作用&#xff1f;握手成功后&#xff0c;SRS和客户端进行消息交换&#xff0c;对应wiresharek这部分截图&#xff1a; 流程图&#xff08;之前画的&#xff0c;可能不够详细&#xf…

Linux文件系统与设备文件

一、Linux文件操作 Linux的文件系统API主要涉及创建、打开、读写、定位、关闭文件 创建 int creat(const char *filename, mode_t mode);mode: 代表新建文件的存取权限&#xff0c;需要和umask相与才能确定最终权限(mode&umask)。 umask代表文件在创建时需要去掉的存取…

Zookeeper:Zookeeper JavaAPI操作与分布式锁

文章目录 一、Zookeeper JavaAPI操作1、Curator介绍2、创建、查询、修改、删除节点3、Watch事件监听 二、Zookeeper分布式锁原理 一、Zookeeper JavaAPI操作 1、Curator介绍 Curator是Apache Zookeeper的Java客户端。常见的Zookeeper Java API&#xff1a; 原生Java API。ZkC…

[深入理解DDR] 总目录

依公知及经验整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《深入理解DDR》 蓝色的是传送门&#xff0c;点击链接即可到达指定文章。 图。 DDR 分类 导论 [RAM] DRAM 导论&#xff1a;DDR4 | DDR5 | LPDDR5 | GDRR6 | HBM 应运而生 运存与内存&#xff1f;内存与存…

【每日刷题】Day77

【每日刷题】Day77 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. LCR 159. 库存管理 III - 力扣&#xff08;LeetCode&#xff09; 2. LCR 075. 数组的相对排序 - 力…

RedisAtomicInteger并发案例

&#x1f370; 个人主页:__Aurora__ &#x1f35e;文章有不合理的地方请各位大佬指正。 &#x1f349;文章不定期持续更新&#xff0c;如果我的文章对你有帮助➡️ 关注&#x1f64f;&#x1f3fb; 点赞&#x1f44d; 收藏⭐️ RedisAtomicInteger 提供了对整数的原子性操作&a…

策略模式在金融业务中的应用及其框架实现

引言 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为设计模式&#xff0c;它允许在不修改客户端代码的情况下&#xff0c;动态地改变一个类的行为。它通过定义一系列算法并将它们封装在独立的策略类中&#xff0c;使这些算法可以互相替换&#xff0c;而不会影响…

PyTorch使用GPU进行Tensor及模型计算

文章目录 1. 计算设备&#xff1a;GPU/CPU2. Tensor的GPU计算3. 模型的GPU计算 对复杂的神经网络和大规模的数据来说&#xff0c;使用CPU来计算可能不够高效。这里&#xff0c;我们将介绍如何使用单块NVIDIA GPU来计算。 首先&#xff0c;需要确保已经安装好了PyTorch GPU版本…