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

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

news 2026/3/31 8:53:48

搭建项目

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

抖音无水印下载完全指南：5分钟掌握批量下载核心技巧

抖音无水印下载完全指南&#xff1a;5分钟掌握批量下载核心技巧 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support…...

编程新知 2026/3/31 8:31:41

AI 使用过程中遇到的问题及解决方案

////////////////////////////////////////////////////////////////////////////////////////////////////////context_management: Extra inputs are not permitted Received Model Groupclaude-sonnet-4-6错误原因这是 Claude API 的 context management&#xff08;上下文管…...

编程新知 2026/3/31 7:45:24

[模电]从PN结到实用电路：二极管的深度解析与设计指南

1. PN结&#xff1a;二极管的物理基础 想象一下把一块P型半导体和N型半导体紧密贴合在一起&#xff0c;就像把两块不同颜色的橡皮泥揉捏在一起。P型半导体里充满了带正电的"空穴"&#xff08;可以理解为缺少电子的位置&#xff09;&#xff0c;而N型半导体则富含自由…...

编程新知 2026/3/31 7:17:06

告别布局跳动！Android Dialog+EditText+软键盘的终极适配指南（含Kotlin代码）

Android Dialog软键盘适配全攻略&#xff1a;从布局跳动到完美交互 在Android开发中&#xff0c;Dialog与软键盘的交互一直是让开发者头疼的问题。当EditText获得焦点时&#xff0c;弹出的软键盘经常会遮挡输入框或导致布局跳动&#xff0c;严重影响用户体验。本文将深入探讨Di…...

编程新知 2026/3/31 6:46:53

AI人脸隐私卫士快速部署指南：3步启动WebUI界面，开箱即用

AI人脸隐私卫士快速部署指南&#xff1a;3步启动WebUI界面&#xff0c;开箱即用 1. 引言&#xff1a;你的隐私&#xff0c;需要一道智能防线 你有没有过这样的困扰&#xff1f;公司团建拍了张大合照&#xff0c;想发朋友圈分享喜悦&#xff0c;却担心照片里同事们的隐私&…...

编程新知 2026/3/31 6:06:32

树莓派通过HTTP协议对接OneNET Studio 5.0物联网平台实战指南

1. 环境准备与平台配置 在开始之前&#xff0c;我们需要准备好树莓派硬件和OneNET Studio 5.0平台账号。树莓派建议使用Raspberry Pi 4 Model B或更新型号&#xff0c;系统选择Raspbian或Raspberry Pi OS。OneNET Studio是中国移动推出的物联网开放平台&#xff0c;5.0版本对接…...

编程新知 2026/3/31 5:20:11

Godep依赖自动发现机制：Go项目依赖管理的终极指南

Godep依赖自动发现机制&#xff1a;Go项目依赖管理的终极指南 【免费下载链接】godep dependency tool for go 项目地址: https://gitcode.com/gh_mirrors/go/godep Godep作为Go语言早期经典的依赖管理工具&#xff0c;通过自动发现与追踪项目依赖&#xff0c;为Go开发者…...

编程新知 2026/3/31 5:16:09

jsontop.cn使用全攻略：免费无广告的在线工具站，电脑手机通用

你是否经常遇到这些问题&#xff1a; 拿到一堆杂乱 JSON 看不懂&#xff0c;想格式化却不会&#xff1f;需要转 Base64、算 MD5、转时间戳&#xff0c;却要装复杂软件&#xff1f;想测试正则、预览 HTML&#xff0c;还要搭环境、找插件&#xff1f;网上工具全是广告&#xff0…...

编程新知 2026/3/31 5:00:02

GLM-4.1V-9B-Base惊艳效果：3D渲染图材质/光影/构图中文分析

GLM-4.1V-9B-Base惊艳效果&#xff1a;3D渲染图材质/光影/构图中文分析 1. 视觉理解新标杆 GLM-4.1V-9B-Base作为智谱开源的视觉多模态理解模型&#xff0c;在3D渲染图分析领域展现出令人惊艳的能力。不同于常规的图片识别工具&#xff0c;这款模型能够深入理解3D渲染图中的材…...

编程新知 2026/3/31 4:44:00

手把手教你用EAS2搞定maxon电机与elmo驱动器：从参数辨识到运动控制

手把手教你用EAS2实现maxon电机与elmo驱动器的精准控制 在工业自动化和精密运动控制领域&#xff0c;maxon电机以其卓越的性能和可靠性著称&#xff0c;而elmo驱动器则是实现高精度控制的理想选择。本文将带你从零开始&#xff0c;通过EAS2软件完成从硬件连接到参数辨识&#x…...

编程新知 2026/3/31 3:16:16