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

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

news 文章来源：https://blog.csdn.net/m0_62836433/article/details/133773227 2025/5/25 13:00:01

搭建项目

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

中国大模型开源创新与合作的新篇章 | 2023 CCF中国开源大会

2023年10月21日至22日&#xff0c;由中国计算机学会&#xff08;CCF&#xff09;和开放原子开源基金会联合主办的CCF中国开源大会&#xff08;CCF ChinaOSC&#xff09;在湖南省长沙市北辰国际会议中心成功召开。此次大会以“开源联合&#xff0c;聚力共赢”为主题&#xff0c;…...

编程日记 2023/10/26 5:42:17

vue项目切换页面白屏的解决方案

问题描述 1、页面切换后白屏&#xff0c;同时切换回上一个页面同样白屏 2、刷新后正常显示 3、有警告&#xff1a;Component inside <Transition> renders non-element root node that cannot be animated 解决方法 <Transition>中的组件呈现不能动画化的非元素根…...

编程日记 2023/10/26 5:41:16

5G vs 4G

5G与4G的关键性能指标对比 指标名称流量密度连接密度空口时延移动性能效指标用户体验速率频谱效率峰值速率4G 参考值0.1 M b i t / s / m 2 Mbit/s/m^2 Mbit/s/m2 1 ∗ 1 0 5 / k m 2 1*10^5/km^2 1∗105/km210ms350km/h1倍10Mbit/s1倍1Gbit/s5G 参考值10 M b i t / s / m 2 M…...

编程日记 2023/10/26 5:40:15

【JavaEE重点知识归纳】第11节：认识异常

目录 一&#xff1a;异常的概念和体系结构 1.概念 2.体系结构 3.异常分类 二&#xff1a;异常的处理 1.防御式编程 2.异常的抛出 3.异常的捕获 4.异常的处理流程 三&#xff1a;自定义异常 一&#xff1a;异常的概念和体系结构 1.概念 &#xff08;1&#xff09;在…...

编程日记 2023/10/26 5:39:14

一键自助建站系统api版系统源码

自助建站系统,一建建站系统api版,自动建站 安装推荐php7.2或7.2以下都行 可使用虚拟主机或者服务器进行搭建。 分站进入网站后台 域名/admin 初始账号123456qq.com密码123456 找到后台的网站设置 将主站域名及你在主站的通信secretId和通信secretKey填进去。 即可正常使用 通信…...

编程日记 2023/10/26 5:38:14

全国三维数字化创新设计大赛湖北赛区省赛成功举办

须弥芥子&#xff0c;数字如海。10月14日—15日&#xff0c;2023 年数字科技文化节——第16届全国三维数字化创新设计大赛湖北赛区省赛暨产教联合体大会在武汉软件工程职业学院成功举行。 &#xff08;大赛全体专家领导合影&#xff09; 全国三维数字化创新设计大赛组委会副秘…...

编程日记 2023/10/26 5:37:13

OpenCV #以图搜图：均值哈希算法（Average Hash Algorithm）原理与实验

1. 介绍 均值哈希算法&#xff08;Average Hash Algorithm&#xff09; 是哈希算法的一种&#xff0c;主要用来做相似图片的搜索工作。 2. 原理 均值哈希算法&#xff08;aHash&#xff09;首先将原图像缩小成一个固定大小的像素图像&#xff0c;然后将图像转换为灰度图像&am…...

编程日记 2023/10/26 5:36:12

博通BCM575系列RDMA网卡驱动bnxt_re分析(一)

简介 整个BCM系列驱动分成以太网部分(bnxt_en.ko)和RDMA部分(bnxt_re.ko), 两个模块之间通过内核的auxiliary_bus进行管理.我们主要分析下bnxt_re驱动. 代码结构 这个驱动的核心是 qplib_fp.c, 这个文件主要包含了驱动的数据路径, 包括Post Send, Post Recv, Poll CQ流程的实…...

编程日记 2023/10/26 5:35:11

集合总结-

Collection 常用方法 package com.test01;import java.util.ArrayList; import java.util.Collection; /*添加元素---boolean add(E e);移除元素---boolean remove(Object c);判断元素是否存在---boolean contains(Object c);*/ public class S {public static void main(Str…...

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

【知识串联】概率论中的值和量（随机变量/数字特征/参数估计）【考研向】【按概率论学习章节总结】

就我的概率论学习经验来看&#xff0c;这两个概念极易混淆&#xff0c;并且极为重点&#xff0c;然而&#xff0c;在概率论的前几章学习中&#xff0c;如果只是计算&#xff0c;对这方面的辨析不清并没有问题。然而&#xff0c;到了后面的参数估计部分&#xff0c;却可能出现问…...

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