当前位置： 首页 > news >正文

＊Django中的Ajax 纯js的书写样式1

news 2026/5/17 15:57:52

搭建项目

建立一个Djano项目，建立一个app，建立路径，视图函数大多为render,

Ajax的创建

urls.py

path('index/',views.index),
path('index2/',views.index2),

views.py

def index(request):return render(request,'01.html')
def index2(request):return render(request,'02.html')

01.html

readyState共有五个返回值【0 1 2 3 4】，

0：ajax对象创建成功

1：准备请求结束

2 3 4：服务器接收请求，服务器解析，服务器响应请求【这三步都在监听回调函数中触发】

除了服务器响应外，还要确认资源

200：成功访问【201，204等】

300：服务器有多个可以响应客户端请求的资源【304，307等】

404：访问资源不存在【400，401等】

500： 服务器奔溃【505等】

<body><button>send</button><script>document.querySelector('button').onclick=function(){// 1 创建ajax对象var xhr=new XMLHttpRequest(); //0console.log('new',xhr.readyState);// 2 准备请求xhr.open('get/post','地址',是否异步);xhr.open('get','/index2/',true);// 1console.log('get',xhr.readyState);// 3 发送请求xhr.send();// 4 监听回调函数xhr.onreadystatechange=function(){// 判断状态执行到哪一步了 0 1 2 3 4console.log('函数',xhr.readyState);//打印 2 3 4if(xhr.readyState === 4){console.log(xhr.status);if(xhr.status === 200){// 响应数据console.log(xhr.response) //返回的数据}}}}</script>
</body>

执行python manage.py runserver

浏览器点击send，看控制台是否打印【02.html如下显示】

传递参数【get/post】

urls.py

#传递参数get/post
path('p/',views.p),#send
path('p2/',views.p2),#back

views.py

注意post与get请求

def p(request):return render(request,'03.html')
def p2(request):if request.method == 'POST':print('进入post请求')user = request.POST.get('name')pwd = request.POST.get('pwd')print(user,pwd)return render(request, '04.html', {'name': user, 'password': pwd})print('进入get请求')user=request.GET.get('name')pwd=request.GET.get('pwd')return render(request,'04.html',{'name':user,'password':pwd})

03.html

get请求大致不变【url携带参数】

post请求必须携带参数，所以参数是放在data中，并且要避免csrf-token的验证，给请求头除了原本的'Content-type'还要加上csrf的验证，参数直接由send方法发送

转义字符是英文输入法下的 ~ 键

<body>
{% csrf_token %}
用户名：<input type="text"><br>
密码：<input type="password">
<button id="login">send</button>
<script>document.querySelector('button').onclick=function (){var name=document.querySelector('input[type=text]').valuevar pwd=document.querySelector('input[type=password]').valueconsole.log(name,pwd)var xhr=new XMLHttpRequest();{#get请求#}{#var urls=`/p2/?name=${ name }&pwd=${ pwd } `{# `在笔记本tab上面的那个键 #}{#xhr.open('get',urls,true)#}{#xhr.send()#}{#post请求#}xhr.open('post','/p2/',true)var csrf=document.querySelector('input[type=hidden]').valuedata=`&${ name }&pwd=${ pwd }`xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8')xhr.setRequestHeader('X-CSRFToken', csrf);xhr.send(data)xhr.onreadystatechange=function (){console.log(xhr.status)console.log(xhr.readyState)if(xhr.readyState === 4){if(xhr.status === 200){console.log(xhr.response)}}}}
</script>
</body>

04.html

<body>
用户名{{ name }}
密码{{ password }}
</body>

异步

open的第三个参数

预留加载位置【例如网络不佳情况下的图片加载失败】，还能执行其它函数

<body><script>// 同步{#var str="hello world!"#}{#for(var i=0;i<100;i++){#}{#    console.log(i)#}{# } #}{#console.log(str)#}// 异步var str2='hello world2'var xhr=new XMLHttpRequest()xhr.open('get','/index2/',true)xhr.send(){#代码跳过该函数，向下执行 ，异步加载要请求的  #}xhr.onreadystatechange=function (){if(xhr.readyState === 4){if(xhr.status === 200){console.log(xhr.response)}}}for(var i=0;i<100;i++){console.log(i)}console.log(str2)</script>
</body>

获取与解析本地Json

建立json文件

{"total": 4,"data": [{"name": "三国演义","category": "文学","desc": "一个军阀混战的年代"},{"name": "三国演义2","category": "文学2","desc": "一个军阀混战的年代2"}],"obj": {"adf": "adf"}
}

Json文件中必需使用双引号，最后一个数据不加逗号，比如在data中的列表中第一个字典，最后一行数据不能加逗号否则报Uncaught SyntaxError: Expected double-quoted property name in JSON...

urls.py

#ajax获取本地json数据-解析显示页面
path('gjson/', views.Jsond, name='gjson'),
path('huoqu/',views.huoqu),

views.py

def huoqu(request):return render(request,'06.html')def Jsond(request):#报错with open('static/data.json', 'r') as json_file:data = json.load(json_file)response = JsonResponse(data)# 设置X-Content-Type-Options头部response['X-Content-Type-Options'] = 'nosniff'return response

'X-Content-Type-Options':nosniff确保浏览器按照指定的选项来处理响应的内容类型，以提高安全性。

不加报ncaught SyntaxError: Unexpected token 'o', "nosniff" is not valid JSON

json也可以写为这样，不过要导入JsonResponse

from django.http import JsonResponsedef Jsond(request):#JsonResponse(json文件)with open('static/data.json', 'r') as json_file:data = json.load(json_file)return JsonResponse(data)

06.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>h3{color:orange;}</style>
</head>
<body><button id="btn">click</button><ul>
{#       将json数据插入#}</ul><script>document.getElementById('btn').onclick=function (){// 清空uldocument.querySelector('ul').innerHTML=''var xhr=new XMLHttpRequest()xhr.open('get','/static/data.json')xhr.send()xhr.onreadystatechange=function (){console.log(xhr.status)if(xhr.readyState === 4){if(xhr.status === 200){{#console.log(xhr.response) //字符串#}var obj = JSON.parse(xhr.response);{#console.log(obj)#}var arr=obj.datavar str=''for(var i=0;i<arr.length;i++){console.log(arr[i].name){#console.log(arr[i].category)#}{#console.log(arr[i].desc)#}{#方法1 创建li标签#}{#var lis=document.createElement('li')#}{#lis.innerHTML=`<h3>${arr[i].name}</h3><p>${ arr[i].desc}</p>`#}{##}{#方法1 追加给ul#}{#document.querySelector('ul').appendChild(lis)#}{#方法2 字符串拼接#}str+=`<li><h3>书名：${arr[i].name}</h3><p>简介：${ arr[i].desc}</p></li>`;}console.log(str)document.querySelector('ul').innerHTML=str}}}}</script>
</body>
</html>

 将获取到的json数据传入li，加进先前准备好的ul中

相关文章：

＊Django中的Ajax 纯js的书写样式1

搭建项目 建立一个Djano项目&#xff0c;建立一个app&#xff0c;建立路径&#xff0c;视图函数大多为render, Ajax的创建 urls.py path(index/,views.index), path(index2/,views.index2), views.py def index(request):return render(request,01.html) def index2(requ…...

编程日记 2023/10/26 6:02:35

谈谈node架构中的线程进程的应用场景、事件循环及任务队列

本文作者系360奇舞团前端开发工程师 文章标题&#xff1a;谈谈node架构中的线程进程的应用场景、事件循环及任务队列 Node.js是一个基于Chrome V8引擎的JavaScript运行时环境&#xff0c;nodejs是单线程执行的&#xff0c;它基于事件驱动和非阻塞I/O模型进行多任务的执行。在理…...

编程日记 2023/10/26 6:01:34

http代理IP它有哪些应用场景？如何提升访问速度？

随着互联网的快速发展&#xff0c;越来越多的人开始关注网络速度和安全性。其中&#xff0c;代理IP技术作为一种有效的网络加速和安全解决方案&#xff0c;越来越受到人们的关注。那么&#xff0c;http代理IP有哪些应用场景&#xff1f;又如何提升访问速度呢&#xff1f; 一、h…...

编程日记 2023/10/26 6:00:33

Armv8/Armv9的VIPT的别名问题是如何解决的

https://www.cse.unsw.edu.au/~cs9242/02/lectures/03-cache/node8.html https://developer.arm.com/documentation/ddi0406/b/System-Level-Architecture/Virtual-Memory-System-Architecture–VMSA-/Address-mapping-restrictions...

编程日记 2023/10/26 5:59:33

java/javaswing/窗体程序，人脸识别系统，人脸追踪，计算机视觉

源码下载地址 支持&#xff1a;远程部署/安装/调试、讲解、二次开发/修改/定制 源码下载地址...

编程日记 2023/10/26 5:58:32

设计模式（16）迭代器模式

一、介绍&#xff1a; 1、定义&#xff1a;迭代器模式 (Iterator Pattern) 是一种行为型设计模式&#xff0c;它提供一种顺序访问聚合对象&#xff08;如列表、集合等&#xff09;中的元素&#xff0c;而无需暴露聚合对象的内部表示。迭代器模式将遍历逻辑封装在一个迭代器对象…...

编程日记 2023/10/26 5:57:31

Openssl数据安全传输平台011：秘钥协商服务端

0. 代码仓库 https://github.com/Chufeng-Jiang/OpenSSL_Secure_Data_Transmission_Platform/tree/main/Preparation 编译protobuf类文件 VS2022 protobuf3.17 Message.proto protoc Message.proto --cpp_out./...

编程日记 2023/10/26 5:56:29

【23种设计模式】里氏替换原则

个人主页&#xff1a;金鳞踏雨 个人简介&#xff1a;大家好&#xff0c;我是金鳞&#xff0c;一个初出茅庐的Java小白 目前状况&#xff1a;22届普通本科毕业生&#xff0c;几经波折了&#xff0c;现在任职于一家国内大型知名日化公司&#xff0c;从事Java开发工作 我的博客&am…...

编程日记 2023/10/26 5:55:29

嵌入式系统设计师考试笔记之操作系统基础复习笔记一

目录 1、嵌入式软件基础 &#xff08;1&#xff09;嵌入式软件的特点&#xff1a; &#xff08;2&#xff09;嵌入式软件分类&#xff1a; &#xff08;3&#xff09;无操作系统的嵌入式软件的两种实现方式&#xff1a; &#xff08;4&#xff09;有操作系统的三大优点&am…...

编程日记 2023/10/26 5:54:28

Unity开发之观察者模式（事件中心）

观察者模式是一种对象行为模式。它定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。在观察者模式中&#xff0c;主体是通知的发布者&#xff0c;它发出通知时并不需要知道谁是它的观察者&#…...

编程日记 2023/10/26 5:53:27

16、window11+visual studio 2022+cuda+ffmpeg进行拉流和解码（RTX3050）

基本思想：需要一个window11 下的gpu的编码和解码代码，逐开发使用，先上个图 几乎0延迟的，使用笔记本的显卡 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.0\extras\demo_suite>deviceQuery.exe deviceQuery.exe Starting...CUDA Device Query (Runtime API…...

编程日记 2023/10/26 5:52:26

【C++笔记】如何用检查TCP或UDP端口是否被占用

一、检查步骤 使用socket函数创建socket_fd套接字。使用sockaddr_in结构体配置协议和端口号。使用bind函数尝试与端口进行绑定&#xff0c;成功返回0表示未被占用&#xff0c;失败返回-1表示已被占用。 二、步骤详解 2.1 socket函数 socket 函数是用于创建套接字的函数&…...

编程日记 2023/10/26 5:51:25

“华为杯”研究生数学建模竞赛2015年-【华为杯】D题：面向节能的单/多列车优化决策问题

目录 摘 要： 一、问题重述 二、模型假设 三、符号说明 四、问题一求解...

编程日记 2023/10/26 5:50:24

『第三章』雨燕栖息地：Swift 开发环境

在本篇博文中,您将学到如下内容: 1. Swift 开发平台2. Swift 集成开发环境 Xcode&#xff1f;3. 原型试验场&#xff1a;Playground4. 另一种尝试&#xff1a;iPad 上的 Swift Playgrounds5. Swift 交互实验室&#xff1a;Swift REPL总结 咫尺春三月&#xff0c;寻常百姓家。为…...

编程日记 2023/10/26 5:49:23

elasticsearch-5.6.15集群部署，如何部署x-pack并添加安全认证

目录 一、环境 1、JDK、映射、域名、三墙 2、三台服务器创建用户、并为用户授权 二、配置elasticsearch-5.6.15实例 1、官网获取elasticsearch-5.6.15.tar.gz&#xff0c;拉取到三台服务器 2、elas环境准备 3、修改elasticsearch.yml配置 4、修改软、硬件线程数 5、修改…...

编程日记 2023/10/26 5:48:23

C++ list 模拟实现

目录 1. 基本结构的实现 2. list() 3. void push_back(const T& val) 4. 非 const 迭代器 4.1 基本结构 4.2 构造函数 4.3 T& operator*() 4.4 __list_iterator& operator() 4.5 bool operator!(const __list_iterator& it) 4.6 T* operator->…...

编程日记 2023/10/26 5:47:22

Elasticsearch：使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation （三）

这是继之前文章&#xff1a; Elasticsearch&#xff1a;使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation &#xff08;一&#xff09; Elasticsearch&#xff1a;使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation &#xff08;二&…...

编程日记 2023/10/26 5:46:21

主流电商平台价格如何高频监测

双十一来临在即&#xff0c;除了商家很兴奋&#xff0c;品牌和消费者同样持续关注&#xff0c;除了关注不同平台的产品上架情况&#xff0c;价格也是这些渠道参与者最为关注的&#xff0c;品牌需要通过掌握各店铺的价格情况&#xff0c;了解市场情况以及各经销商的渠道治理现状…...

编程日记 2023/10/26 5:45:21

Spring关于注解的使用

目录 一、使用注解开发的前提 1.1 配置注解扫描路径 二、使用注解创建对象 2.1 Controller&#xff08;控制器储存&#xff09; 2.2 Service&#xff08;服务储存&#xff09; 2.3 Repository&#xff08;仓库储存&#xff09; 2.4 Component&#xff08;组件储存&#xff09; …...

编程日记 2023/10/26 5:44:20

图像处理入门 1（Introduction to image processing）

如何获得一张照片 &#xff08;How to obtain a photo&#xff09;&#xff1f; 每次看到一些光学设备的规格介绍的时候&#xff0c;一些专用名词&#xff0c;例如&#xff1a;等效焦距&#xff0c;曝光模式 等 让你一头雾水。爱学习的你一定十分好奇他们是什么意思。每次看到…...

编程日记 2023/10/26 5:43:19

STM32CubeMX外设配置实战——以F103C8T6的CAN与DMA为例

1. STM32CubeMX与F103C8T6开发基础 STM32CubeMX是ST官方推出的图形化配置工具&#xff0c;它能极大简化STM32系列MCU的外设初始化流程。对于刚接触STM32开发的工程师来说&#xff0c;这个工具就像"乐高积木说明书"——通过可视化操作就能完成80%的底层配置工作。我最…...

编程新知 2026/5/17 10:24:22

突破存储限制：群晖DSM7下Synology Photos自定义文件夹挂载实战

1. 为什么需要自定义文件夹挂载 很多群晖用户升级到DSM7后都会遇到一个头疼的问题&#xff1a;Synology Photos默认把所有个人照片都存放在/home/Photos目录下&#xff0c;而这个目录实际上位于/homes共享文件夹中。随着照片数量不断增加&#xff0c;/homes所在存储空间很快就会…...

编程新知 2026/5/17 10:03:32

编程统计公司内部资料查阅使用数据，优化资料分类存储方式。提升职场员工工作查阅办事效率。

构建一个公司内部资料查阅使用统计与资料分类存储优化的商务智能示例项目&#xff0c;去营销化、中立化&#xff0c;仅用于学习与工程实践参考。一、实际应用场景描述在中大型企业中&#xff0c;内部资料&#xff08;制度、流程文档、技术手册、项目档案&#xff09;数量庞大&a…...

编程新知 2026/5/17 9:57:16

别再只盯着wx.login了！SpringBoot后端实战：用getPhoneNumber接口搞定小程序用户手机号绑定

微信小程序用户手机号绑定&#xff1a;SpringBoot后端深度实践指南 在当今移动互联网生态中&#xff0c;微信小程序已成为连接用户与服务的重要桥梁。对于需要强实名认证或直接触达用户的业务场景&#xff08;如电商交易、金融服务、政务办理等&#xff09;&#xff0c;仅依赖w…...

编程新知 2026/5/17 9:53:09

SimulinkVeriStandLabVIEW协同开发——从模型编译到交互式仪表盘部署

1. 工具链协同开发的核心价值 在电力电子和工业控制领域&#xff0c;快速原型开发往往需要跨越建模、实时测试和人机交互三个关键环节。Simulink、VeriStand和LabVIEW组成的工具链&#xff0c;就像汽车制造的流水线——Simulink是设计图纸的工程师&#xff0c;VeriStand是组装车…...

编程新知 2026/5/17 9:53:09

终极Python通达信数据解析方案：mootdx完整使用指南与金融量化实践

终极Python通达信数据解析方案&#xff1a;mootdx完整使用指南与金融量化实践 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 在金融数据分析和量化交易领域&#xff0c;通达信作为国内主流的证券…...

编程新知 2026/5/17 8:56:14

终极指南：如何为PotPlayer配置百度翻译插件实现实时字幕翻译

终极指南&#xff1a;如何为PotPlayer配置百度翻译插件实现实时字幕翻译 【免费下载链接】PotPlayer_Subtitle_Translate_Baidu PotPlayer 字幕在线翻译插件 - 百度平台 项目地址: https://gitcode.com/gh_mirrors/po/PotPlayer_Subtitle_Translate_Baidu PotPlayer_Sub…...

编程新知 2026/5/17 8:47:13

Steam成就管理器终极指南：3步修复错失的游戏成就

Steam成就管理器终极指南&#xff1a;3步修复错失的游戏成就 【免费下载链接】SteamAchievementManager A manager for game achievements in Steam. 项目地址: https://gitcode.com/gh_mirrors/st/SteamAchievementManager Steam Achievement Manager&#xff08;SAM&a…...

编程新知 2026/5/17 8:13:07

Python自动化Excel数据抓取：OpenClaw技能实战指南

1. 项目概述&#xff1a;从Excel表格到智能数据抓取如果你每天的工作都离不开Excel&#xff0c;并且经常需要从各种网页、文档甚至PDF里手动复制粘贴数据&#xff0c;然后费劲地整理到表格里&#xff0c;那你一定对“Excel大师”这个称号既向往又头疼。我们总希望Excel能更“聪…...

编程新知 2026/5/17 7:35:55

AI量化交易实战：从机器学习模型到加密货币对冲基金系统构建

1. 项目概述&#xff1a;一个面向加密货币的AI对冲基金框架最近几年&#xff0c;AI在量化交易领域的应用已经从实验室走向了实战&#xff0c;尤其是在波动性极高的加密货币市场。如果你对量化交易和机器学习感兴趣&#xff0c;并且想找一个能直接上手、结构清晰的实战项目来学习…...

编程新知 2026/5/17 5:39:43