【Django】ajax和django接口交互(获取新密码)

文章目录

    • 一、需求
      • 1. 效果图
    • 二、实验
      • 1. 写get接口后端
      • 2. 写html后端
      • 3. 写前端
      • 4. 测试

一、需求

1. 效果图

在这里插入图片描述

二、实验

1. 写get接口后端

  • 写views
import string
import random
def getnewpwd(request):words = list(string.ascii_lowercase+string.ascii_uppercase+string.digits+string.punctuation)random.shuffle(words)result = "".join(words[:20])return HttpResponse(result)
  • 写urls

urlpatterns = [path("getnewpwd/",views.getnewpwd),
]
  • 测试后端接口
    在这里插入图片描述

2. 写html后端

  • 写views
def getnewpwdhtml(request):return render(request,"getnewpwd.html",{})
  • 写urls
urlpatterns = [path("getnewpwdhtml/",views.getnewpwdhtml),
]

3. 写前端

{% load static %}
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet"href="{% static "antapp/bootstrap/bootstrap.min.css" %}"><title>Document</title></head><body><div class="row" style="margin-top: 20px;margin-left: 40px;"><button type="button" id="getnewpwd" class="btn btn-success" style="margin-left: 5px;">获取新密码</button></div><div class="row"  style="margin-top: 20px; margin-left: 40px;"><div id="shownewpwd" class="alert alert-primary" role="alert"> </div></div><script src="{% static "antapp/bootstrap/jquery.min.js" %}"></script><script src="{% static "antapp/bootstrap/bootstrap.bundle.min.js" %}"></script><script>$(function(){$("#getnewpwd").click(function(){$.ajax({url:"/getnewpwd/",type:"get",success:function(result){$("#shownewpwd").html(result)}})})})</script></body>
</html>

4. 测试

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Oracle调整redo log大小

1 前言 前几天工作中生产环境数据库出现了一个很有趣的问题&#xff0c;早上看监控发现某个不太重要的业务系统的表空间满了&#xff0c;持续了差不多一个晚上&#xff0c;竟然没收到任何通知&#xff0c;赶忙上去扩容。 本以为完事大吉&#xff0c;扩容后过了好一会儿&#…

大模型算法面试题(十三)

本系列收纳各种大模型面试题及答案。 1、微调后的模型出现能力劣化&#xff0c;灾难性遗忘是怎么回事 微调后的模型出现能力劣化&#xff0c;灾难性遗忘&#xff08;Catastrophic Forgetting&#xff09;是一个在机器学习领域&#xff0c;尤其是在深度学习和大模型应用中频繁出…

特斯拉财报看点:FSD拳打华为,Robotaxi 脚踢百度

大数据产业创新服务媒体 ——聚焦数据 改变商业 特斯拉发最新财报了&#xff0c;这不仅是一份财务报告&#xff0c;更是一张未来发展的蓝图。在这份蓝图中&#xff0c;两个关键词格外耀眼——FSD&#xff08;全自动驾驶系统&#xff09;和Robotaxi&#xff08;无人驾驶出租车&…

探索科技新境界,体验系统维护的极致自由—蓝屏工具箱4.0全新登场

官网&#xff1a;蓝屏工具箱官网 下载链接&#xff1a;蓝屏工具箱最新版安装包官方版下载 在数字化浪潮席卷全球的今天&#xff0c;软件工具已不仅仅是简单的代码集合&#xff0c;它们如同工匠手中的雕刻刀&#xff0c;精细打磨、雕琢着数字世界的每一个角落。创峄公司深谙此道…

深入解析 GPT-4o mini

深入解析 GPT-4o mini GPT-4o mini 是 OpenAI 在 2024 年 7 月 18 日推出的一款迷你 AI 模型&#xff0c;它是 GPT-4o 的轻量级版本&#xff0c;旨在以更经济实惠的价格和优化的性能满足市场需求。这款模型以其高性价比、多模态推理能力、以及强大的文本处理能力等特点&#x…

基于多种机器学习算法的短信垃圾分类模型

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主导入第三方库读取数据数据预处理数据分析与可视化机器学习建模贝叶斯逻辑回归支持向量机随机森林XGBoost总结每文一语 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私…

【数据结构初阶】单链表经典算法题十二道——得道飞升(中篇)

hi&#xff0c;bro—— 目录 5、 链表分割 6、 链表的回文结构 7、 相交链表 8、 环形链表 【思考】 —————————————— DEAD POOL —————————————— 5、 链表分割 /* struct ListNode {int val;struct ListNode *next;ListNode(int x) : val(x), …

Vue事件总线(EventBus)的概念、使用以及注意事项

在Vue开发中&#xff0c;组件间的通信是不可避免的需求。对于父子组件间的通信&#xff0c;Vue提供了props和$emit/$on等内置机制。然而&#xff0c;当需要在非父子关系的组件间进行通信时&#xff0c;这些内置机制就显得力不从心了。这时&#xff0c;Vue事件总线&#xff08;E…

布隆过滤器面试三道题

针对布隆过滤器的面试题&#xff0c;我将从简单到困难给出三道题目&#xff0c;并附上每道题的简要解析和参考答案。 1. 简单题&#xff1a;什么是布隆过滤器&#xff1f;请简述其基本原理。 解析&#xff1a; 这道题是布隆过滤器的基础概念题&#xff0c;主要考察面试者对布…

学懂C语言(十八):C语言中数组及其应用

目录 一、数组的概念 二、数组的声明、初始化及访问 1、声明 2、初始化 3、访问数组元素 三、数组的应用 1. 存储和处理数据 2. 字符串处理 3. 多维数组 4. 函数参数 5、注意事项 一、数组的概念 C语言中的数组是一种数据结构&#xff0c;用于存储一…

蓝桥杯 2024 年第十五届省赛真题 —— 最大异或结点

目录 1. 最大异或结点1. 问题描述2. 输入格式3. 输出格式4. 样例输入5. 样例输出6. 样例说明7. 评测用例规模与约定 2. 解题思路1. 解题思路2. AC_Code 1. 最大异或结点 1. 问题描述 小蓝有一棵树,树中包含 N N N 个结点&#xff0c;编号为 0 , 1 , 2 , ⋯ , N − 1 0,1,2,…

el-image预览图片点击遮盖处关闭预览

预览关闭按钮不明显 解决方式&#xff1a; 1.修改按钮样式明显点&#xff1a; //el-image 添加自定义类名&#xff0c;下文【test-image】代指 .test-image .el-icon-circle-close{ color:#fff; font-size:20px; ...改成很明显的样式 }2.使用事件监听&#xff0c;监听当前遮…

web前端开发一、VScode环境搭建

1、VScode安装live server插件&#xff0c;写完代码后&#xff0c;保存就会在浏览器自动更新&#xff0c;不需要再去浏览器点击刷新了 2、创建html文件 3、在文件中输入感叹号 &#xff01; 4、选择第一个&#xff0c;然后回车&#xff0c;就会自动输入html的标准程序 5、…

我在百科荣创企业实践——简易函数信号发生器(6)

对于高职教师来说,必不可少的一个任务就是参加企业实践。这个暑假,本人也没闲着,报名参加了上海市电子信息类教师企业实践。7月8日到13日,有幸来到美丽的泉城济南,远离了上海的酷暑,走进了百科荣创科技发展有限公司。在这短短的一周时间里,我结合自己的教学经验和企业的…

Vue Router 4【实用教程】(2024最新版)vue3 路由管理

Vue Router 是 Vue 官方的客户端路由解决方案&#xff0c;在单页应用 (SPA) 中&#xff0c;用户在应用中浏览不同页面时&#xff0c;URL 会随之更新&#xff0c;但页面不需要从服务器重新加载。 核心思想&#xff1a; 通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些…

Xtrabackup备份mysql数据库

XtraBackup是一个用于MySQL和Percona Server的开源热备份工具&#xff0c;它由Percona开发。XtraBackup支持两种备份类型&#xff1a;完整备份&#xff08;full backup&#xff09;和增量备份&#xff08;incremental backup&#xff09;。 一、备份原理及优势 xtrabackup在备份…

OpenCV库学习之cv2.GaussianBlur函数

OpenCV库学习之cv2.GaussianBlur函数 一、简介 cv2.GaussianBlur 是 OpenCV 图像处理库中的一个函数&#xff0c;它用于对图像进行高斯模糊处理。高斯模糊是一种常用的图像模糊技术&#xff0c;通过高斯函数对图像进行卷积&#xff0c;实现图像的平滑效果&#xff0c;常用于去…

20240724-然后用idea创建一个Java项目/配置maven环境/本地仓储配置

1.创建一个java项目 &#xff08;1&#xff09;点击页面的create project&#xff0c;然后next &#xff08;2&#xff09;不勾选&#xff0c;继续next &#xff08;3&#xff09;选择新项目名称&#xff0c;新项目路径&#xff0c;然后Finsh&#xff0c;在新打开的页面选择…

IDEA在编译的时候报Error: java: 找不到符号符号: 变量 log lombok失效问题

错误描述 idea因为lombok的报错: java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled.Your processor is: com.sun.proxy.$Proxy8Lombok supports: sun/apple javac 1.6, ECJ 原因&#xff1a;这是由于Lombok的版本过低的…

ARM-A7通用中断服务函数-1

中断流程 保存现场-执行中断服务函数-返回现场 .S文件的修改 先看代码&#xff1a; IRQ_Handler:push {lr} /* 保存lr地址 */push {r0-r3, r12} /* 保存r0-r3&#xff0c;r12寄存器 */mrs r0, spsr /* 读取spsr寄存器 */push {r0} /* 保存spsr寄存器 */mrc p1…