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…...
智慧交通(代码实现案例）
1.项目简介 目标: 了解智慧交通项目的架构知道智慧交通项目中的模块能够完成智慧交通项目的环境搭建 该项目是智慧交通项目，通过该项目掌握计算机视觉的方法在交通领域的相关应用，包括车道线检测的方法，多目标车辆追踪及流量统计方法&#…...
LeetCode 面试经典150题 205.同构字符串
题目： 给定两个字符串 s 和 t ，判断它们是否是同构的。 如果 s 中的字符可以按某种映射关系替换得到 t ，那么这两个字符串是同构的。 每个出现的字符都应当映射到另一个字符，同时不改变字符的顺序。不同字符不能映射到同一个字…...
存内计算：释放潜能的黑科技
什么是存内计算？ 存内计算技术是一种新型的计算架构，它将存储器和计算单元融合在一起，以实现高效的数据处理。存内计算技术的优势在于能够消除数据搬运的延迟和功耗，从而提高计算效率和能效比。目前，存内计算技术正处…...
CentOS Stream 8系统配置阿里云YUM源
Linux运维工具-ywtool 目录 一.系统环境二.修改yum文件2.1 CentOS-Stream-AppStream.repo2.2 CentOS-Stream-BaseOS.repo2.3 CentOS-Stream-Extras.repo 三.只有一个配置文件四.其他知识4.1 如果想要启用其他源,修改文件配置:enabled14.2 国内源链接 一.系统环境 CentOS Strea…...
MySQL Explain 优化参数详细介绍
Explain 是什么? Explain命令用于分析SQL查询的执行计划，帮助优化查询语句和索引选择。 Explain是MySQL提供的一个非常有用的工具，它能够帮助数据库管理员和开发者理解SQL查询是如何被数据库执行的。通过在SELECT语句前加上EXPLAIN关键字，…...
代码随想录Day58：每日温度、下一个更大元素 I
每日温度 class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {stack<int> st;vector<int> result(temperatures.size(), 0);for(int i 0; i < temperatures.size(); i){while(!st.empty() && tempe…...
冒泡排序 快速排序 归并排序 其他排序
书接上回.. 目录 2.3 交换排序 2.3.1冒泡排序 2.3.2 快速排序 快速排序的优化: 快速排序非递归 2.4 归并排序 基本思想 归并排序非递归 海量数据的排序问题 排序算法时间空间复杂度和稳定性总结 四. 其他非基于比较排序 (了解) 2.3 交换排序 基本思想：…...
阿里云服务器安装MySQL（宝塔面板）
只写关键步骤 1. 创建一个云服务器实例 2 修改密码，登录服务器 3. 安装宝塔面板 进入https://www.bt.cn/new/index.html 进入宝塔面板地址 4. 安装Mysql 5. 创建数据库（可导入数据库） 6. 测试连接数据库 打开Navicat（或其他数据…...
设计模式｜发布-订阅模式（Publish-Subscribe Pattern）
文章目录 初识发布-订阅模式发布-订阅模式的关键概念发布订阅模式的优缺点示例代码（使用 Java 实现）有哪些知名框架使用了发布-订阅模式常见面试题 初识发布-订阅模式 发布-订阅模式（Publish-Subscribe Pattern）是一种软件架构设…...
根据疾病名生成病例prompt
prompt 请根据疾病名：" disease_name " 为我生成一份病历。下面是病历内容的要求：病例应严格包含如下几项: 性别，年龄，疾病名（必须是" disease_name "），主诉ÿ…...