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

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

news 2025/7/12 16:21:36

搭建项目

建立一个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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/7/10 12:34:26

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/7/12 10:50:41

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/7/11 19:41:43

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/6/27 10:06:34

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/7/10 11:29:36

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/7/9 22:43:54

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/6/15 18:10:15

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/7/11 22:36:42

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/7/11 0:12:36