Django——Ajax请求
Django——Ajax请求
一、响应 Json 数据
path('str/' , views.str_view),
path('json/' , views.json_view),
path('jsonresponse/' , views.jsonresponse_view),
path('ls/' , views.ls),
from django.shortcuts import render , HttpResponse
from django.http import JsonResponse
import jsondef str_view(request):str = {"name":"阿宸" , "adder":"广州"}str_json = json.dumps(str , ensure_ascii=False)return HttpResponse(str_json)def json_view(request):response = HttpResponse(content_type='application/json ; charset=utf-8')# 将数据写入到响应对象中response.write({"name":"阿宸" , "adder":"广州"})return responsedef jsonresponse_view(request):# isinstance(data, dict)return JsonResponse({"name":"阿宸" , "adder":"广州"},json_dumps_params={'ensure_ascii':False})def ls(request):return JsonResponse(['境界' , '盾山'] , safe=False , json_dumps_params={'ensure_ascii':False})
二、Ajax 请求
Ajax 是一个异步操作，可以在不加载整个页面的前提下，进行局部的更新数据
Ajax 发送请求之后，代码是可以继续往后面执行，直到操作的事件结束。
Django 项目配置静态文件：在项目中创建一个文件夹：static
在配置文件中，配置项目的搜索路径
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
发送原生的 Ajax 请求
<body>
<form>{% csrf_token %}<p>用户名：<input type="text" name="username"></p><p>密码：<input type="password" name="password"></p><input type="button" value="登录" id="btn">
</form><script>$('#btn').click(function () {$.ajax({// 响应的 url ， 发送请求类型， 携带的数据url:'{% url "ajax" %}',type: 'post',data:{username:$('[name=username]').val(),password:$('[name=password]').val(),// 获取 csrf 跨站点防御的令牌字段值csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),},success:function (data) {// data 是后端传递过来的数据console.log(data)}})})
</script>
</body>
def ajax_regirster(request):return render(request , 'ajax_regirster.html')def ajax_response(request):return HttpResponse('Ajax 数据已提交')
path('ajax/' , views.ajax_regirster),
path('ajax_str/' , views.ajax_response , name='ajax')
使用 jquery 发送 Ajax 请求
<body>
<form>{% csrf_token %}<p>用户名：<input type="text" name="username" id="mingzi"></p><span style="color: red" id="error"></span><p>密码：<input type="password" name="password"></p><input type="submit" value="注册">
</form>
<script>$(function () {error_chack_name = false$('#mingzi').blur(function () {// 调用方法// 方法执行的时间 ， 当绑定的文本失去焦点的时候执行check_name()})// 检验用户名是否合法 检验用户名是否重复function check_name() {// 获取用户名var username = $('#mingzi').val()if(username.length > 3 && username.length < 15){// 向后端发送 ajax 请求$.post(// 请求 的 url"{% url 'check' %}",// 请求参数{name : username,csrfmiddlewaretoken:'{{ csrf_token }}'},// 调用回调函数 ， 接收后端传递过来的数据function (data) {// count 数据if(data.count > 0){$('#error').html('用户名已存在')$('#error').show()error_chack_name = false;} else {error_chack_name = true;$('#error').hide()}})} else {// 用户名长度不合格// 显示错误信息$('#error').html('用户名长度不合格')$('#error').show()error_chack_name = false}}})
</script>
</body>
def jquert_ajax(request):return render(request, 'jquery_ajax.html')def check_name(request):name = request.POST.get('name')users = user.objects.filter(name=name)return JsonResponse({'count':users.count()})
path('ajax2/' , views.jquert_ajax),
path('check_name/' , views.check_name , name='check'),
使用 axios 发送 ajax 请求
<body>
<div id="user"><form>{% csrf_token %}{# @blur 绑定 vue 方法 ， v-model vue 获取文本框的数据#}<p>用户名：<input type="text" name="username" v-model="username" @blur="check_name"></p><span style="color: red" v-show="error_name">[[ error_name_message ]]</span><p>密码：<input type="password" name="password" v-model="password"></p><input type="submit" value="注册"></form>
</div>
<script>// 新建 vue 对象let vm = new Vue({// 通过 ID 选择器获取绑定的标签el:'#user',// 修改 vue 的模板语法delimiters: ['[[',']]'],// 获取表单中的数据data:{// 根据标签绑定 获取v-model 的值username:'',password:'',// 标记错误信息标签 ， 默认为 false , 隐藏标签error_name:false,// 定义异常信息error_name_message:''},// 定义绑定的方法methods:{check_name(){let name_long = this.username.length;if(name_long > 3 && name_long < 15){this.error_name = false;} else {// 长度不合格this.error_name = true;// 设置异常信息this.error_name_message = '用户名长度不合格'}if(this.error_name == false){// 检验用户是否重复axios.get(// 请求的url:/ajax_str/?name=acac'/ajax_str/?name='+this.username,// 请求头 ， 响应类型{responseType : 'json'})// 请求成功.then(response =>{// 获取请求成功之后 ， 后端返回的数据// 数据封装在 response的data 中if(response.data.code > 0){console.log(response.data.code)// 用户名已存在this.error_name = true;this.error_name_message = '用户名已存在'} else {// 用户名不存在this.error_name = false;}})}}}})
</script>
</body>
相关文章：
Django——Ajax请求
Django——Ajax请求 一、响应 Json 数据 path(str/ , views.str_view), path(json/ , views.json_view), path(jsonresponse/ , views.jsonresponse_view), path(ls/ , views.ls),from django.shortcuts import render , HttpResponse from django.http import JsonResponse …...
基于java多角色学生管理系统论文
摘 要 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本学生管理系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…...
python（django）之单一接口管理功能后台开发
1、创建数据模型 在apitest/models.py下加入以下代码 class Apis(models.Model):Product models.ForeignKey(product.Product, on_deletemodels.CASCADE, nullTrue)# 关联产品IDapiname models.CharField(接口名称, max_length100)apiurl models.CharField(接口地址, max_…...
教程1_图像视频入门
一、图像入门 1、cv2.imread()函数 cv2.imread() 是 OpenCV 库中的一个函数，用于读取图像文件。下面是 cv2.imread() 函数的基本介绍和使用方法： 函数定义 cv2.imread(filename, flagscv2.IMREAD_COLOR) 参数 filename：要读取的图像的路…...
MQTT.fx和MQTTX 链接ONENET物联网提示账户或者密码错误
参考MQTT.fx和MQTTX 链接ONENET物联网开发平台避坑细节干货。_mqttx和mqttfx-CSDN博客 在输入password和username后还是提示错误，是因为在使用token的时候，key填写错误，将设备的密钥填入key中...
Svn添加用户、添加用户组、配置项目权限等自动化配置脚本
实现在工作中自动化配置svn用户、用户组、和项目权限的脚本，在使用过程中如果有什么问题，可以联系我。 移步到gitee: svn account permission management: Svn账号、组、权限管理脚本 (gitee.com)...
Spring事务-两种开启事务管理的方式：基于注解的声明式事务管理、基于编程式的事务管理
Spring事务-两种开启事务管理的方式 1、前期准备2、基于注解的声明式事务管理3、基于编程式的事务管理4、声明式事务失效的情况 例子：假设有一个银行转账的业务，其中涉及到从一个账户转钱到另一个账户。在这个业务中，我们需要保证要么两个账户…...
OC 技术 苹果内购
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络࿰…...
云原生周刊：Kubernetes v1.30 一瞥 ｜ 2024.3.25
开源项目推荐 Retina Retina 是一个与云无关的开源 Kubernetes 网络可观测平台，它提供了一个用于监控应用程序运行状况、网络运行状况和安全性的集中中心。它为集群网络管理员、集群安全管理员和 DevOps 工程师提供可操作的见解，帮助他们了解 DevOps、…...
2016年认证杯SPSSPRO杯数学建模D题(第一阶段)NBA是否有必要设立四分线解题全过程文档及程序
2016年认证杯SPSSPRO杯数学建模 D题 NBA是否有必要设立四分线 原题再现 NBA 联盟从 1946 年成立到今天，一路上经历过无数次规则上的变迁。有顺应民意、皆大欢喜的，比如 1973 年在技术统计中增加了抢断和盖帽数据；有应运而生、力挽狂澜的&am…...
EdgeGallery开发指南
API接口 简介 EdgeGallery支持第三方业务系统通过北向接口网关调用EdgeGallery的业务接口。调用流程如下图所示（融合前端edgegallery-fe包含融合前端界面以及北向接口网关功能，通过浏览器访问时打开的是融合前端的界面，通过IP:Port/urlPref…...
ubuntu arm qt 读取execl xls表格数据
一，ubuntu linux pc编译读取xls的库 1，安装libxls(读取xls文件 电脑版) 确保你已经安装了基本的编译工具，如gcc和make。如果没有安装，可以使用以下命令安装： sudo apt-update sudo apt-get install build-essentia…...
STM32 使用gcc编译介绍
文章目录 前言1. keil5下的默认编译工具链用的是哪个2. Arm编译工具链和GCC编译工具链有什么区别吗？3. Gcc交叉编译工具链的命名规范4. 怎么下载gcc-arm编译工具链参考资料 前言 我们在STM32上进行开发时，一般都是基于Keil5进行编译下载，Kei…...
FPGA之组合逻辑与时序逻辑
数字逻辑电路根据逻辑功能的不同，可以分成两大类：组合逻辑电路和时序逻辑电路，这两种电路结构是FPGA编程常用到的，掌握这两种电路结构是学习FPGA的基本要求。 1.组合逻辑电路 组合逻辑电路概念：任意时刻的输出仅仅取决…...
git clone没有权限的解决方法
一般情况 git clone时没有权限，一般是因为在代码库平台上没有配置本地电脑的id_rsa.pub 只要配置上，一般就可以正常下载了。 非一般情况 但是也有即使配置了id_rsa.pub后，仍然无法clone代码的情况。如下 原因 这种情况是因为ssh客户端…...
Redis 的内存回收策略
Redis的内存回收策略用于处理过期数据和内存溢出情况，确保系统稳定性和性能。作为一个高性能的键值存储系统，它通过内存回收策略来维护内存的高效使用 主要包括过期删除策略和内存淘汰策略。 过期删除策略： Redis的过期删除策略是通过设置…...
小程序富文本图片宽度自适应
解决这个问题 创建一个util.js文件,图片的最大宽度设置为100%就行了 function formatRichText(html) {let newContent html.replace(/\<img/gi, <img style"max-width:100%;height:auto;display:block;");return newContent; }module.exports {formatRichT…...
安装redis时候修改过的配置文件
只要是石头，到哪里都不会发光的 bind 绑定主机某个网卡对应的IP地址，如果某个主机有两个网卡A和B，那么绑定了A，通过B连接就会无法访问protected-mode 保护模式 Yes为只能本地访问port 启动的端口号pidfile pid存放的位置ÿ…...
Stable Diffusion 本地部署教程
Stable Diffusion是一种用于构建和部署机器学习模型的开源工具。以下是在本地环境中部署 Stable Diffusion 的基本步骤： 步骤 1: 准备环境 确保你的系统中已经安装了以下软件和工具： Python（建议使用 Python 3.x）pip（Python 包管理工具）Docker（可选，用于容器化部署）…...
sql如何增加数据
在MySQL中增加数据主要是通过INSERT INTO SQL语句来实现的。以下是对插入语句的详细介绍以及举例说明： 1、插入语句的基本格式： 1INSERT INTO table_name (column1, column2, ..., columnN) 2VALUES (value1, value2, ..., valueN); table_name&#x…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...
Linux 中如何提取压缩文件 ？
Linux 是一种流行的开源操作系统，它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间，使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的，要在 …...
基于Springboot+Vue的办公管理系统
角色： 管理员、员工 技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC？ WebRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音…...
6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础
第三周 Day 3 🎯 今日目标 理解类（class）和对象（object）的关系学会定义类的属性、方法和构造函数（init）掌握对象的创建与使用初识封装、继承和多态的基本概念（预告） &a…...
Linux-进程间的通信
1、IPC： Inter Process Communication（进程间通信）： 由于每个进程在操作系统中有独立的地址空间，它们不能像线程那样直接访问彼此的内存，所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...
以太网PHY布局布线指南
1. 简介 对于以太网布局布线遵循以下准则很重要，因为这将有助于减少信号发射，最大程度地减少噪声，确保器件作用，最大程度地减少泄漏并提高信号质量。 2. PHY设计准则 2.1 DRC错误检查 首先检查DRC规则是否设置正确，然…...