前端知识笔记(二)———Django与Ajax

特点:

        异步提交

        局部刷新

例子:github注册

动态获取用户名实时的跟后端确认并实时的展示到前端(局部刷新) 

朝后端发送请求的方式
        1.浏览器地址栏直接输入url回车 -----》get请求

        2.a标签的href属性  -----》get请求

        3.form表单 -----》get请求、post请求

        4.ajax -----》 get请求、post请求

真正的ajax原生,需要使用js操作,jq的ajax方法是对原生js的封装,方便咱们使用

(其他框架也可以,原理是一样的)

前后端混合项目中,我们通常使用jq的ajax实现 js和后端异步交互
        jq操作dom
        jq发ajax请求
前后端分离项目中,我们会使用另一个第三方库,实现 js和后端异步交互(axios)
 

写一个例子:

页面上有三个input框,前两个框输入数字,点击提交,朝后端发送ajax请求,后端计算出结果再返回给前端,动态展示到第三个input框中,整个页面不能刷新,也不能在前端计算

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<button id="btn">提交</button>
<script>// 先给按钮一个点击事件$('#btn').click(function (){// 朝后端发送ajax请求$.ajax({// 1.指定朝哪个后端发送ajax请求url:'', // 不写就是朝当前地址提交// 2.请求方式type:'post', // 不指定就是get,都是小写// 3.数据data:{'l1':$('#d1').val(),'l2':$('#d2').val()},// 4.回调函数:当后端给你返回结果的时候会自动触发 args接收后端返回的结果success:function (args) {$('#d3').val(args)}})})
</script>
</body>
</html>

views代码

from django.shortcuts import render,HttpResponsedef ab_ajax(request):if request.method=='POST':l1 = request.POST.get('l1')l2 = request.POST.get('l2')#先转成整型再加l3=int(l1)+int(l2)return HttpResponse(l3)return render(request,'ajax.html')

前后端传输数据的编码格式(contentType)
因为get请求数据就是直接放在url后面的(url?user=kk$pwd=123),所以主要看下post请求的编码格式

向后端发送post请求的方式
        1.form表单

        2.ajax请求

前后端传输数据的编码格式

        urlencoded

        formdata

        json

        form表单

默认的编码格式是urlencoded

数据格式:user=kk&pwd=123        

Django后端针对符合urlencoded编码格式的数据会自动帮你解析封装到request.POST中 

user=kk&pwd=123     --------》   request.POST

如果把编码格式改成formdata,那么针对普通的键值对还是解析到request.POST中, 而将文件解析到request.FILES中

form表单是没办法发送json格式数据的 

ajax默认的编码格式是urlencoded

ajax发送json格式数据
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="d1">点我</button>
<script>$('#d1').click(function () {$.ajax({url:'',type:'post',data:JSON.stringify({'username':'kk','age':12}),contentType:'application/json',  //指定编码格式success:function () {}})})
</script>
</body>
</html>

ajax发送json格式数据需要注意点

        1.contentType参数指定成:applicaton/json

        2.数据是真正的json格式数据

        3.Django后端不会帮你处理json格式数据,需要你自己去request.body获取并处理

ajax发送文件
1.  ajax发送文件需要借助于js内置对象FormData

html
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>username<input type="text" id="d1"></p>
<p>password<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button id="d4">点我</button>
<script>//点击按钮朝后端发送普通键值对和文件数据$('#d4').on('click',function () {//需要先利用FormData内置对象let formDataObj=new FormData();//2 添加普通的键值对formDataObj.append('username',$('#d1').val());formDataObj.append('password',$('#d2').val());//3添加文件对象formDataObj.append('myfile',$('#d3')[0].file[0]);//4将对象基于发送给后端$.ajax({url:'',type:'post',data:formDataObj, //直接将对象放在data后面即可//ajax发送文件必须指定两个参数contentType:false, //不需使用任何编码,Django后端都能自动识别formdata对象processData: false, //告诉你的浏览器不要对你的数据进行任何处理success:function () {}})})
</script>
</body>
</html>

2.  ajax发送文件必须指定两个参数:
            contentType:false,  //不需使用任何编码,Django后端都能自动识别formdata对象
            processData: false,  //告诉你的浏览器不要对你的数据进行任何处理
3.  Django后端能够直接识别formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中,文件数据自动解析并封装到request.FILES中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/210728.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python ipaddress模块介绍

目录 创建 Address/Network/Interface 对象 关于IP版本的说明 IP主机地址 定义网络 主机接口 审查 Address/Network/Interface 对象 Network 作为 Address 列表 比较运算 将IP地址与其他模块一起使用 实例创建失败时获取更多详细信息 概述 本文档旨在简要介绍 ipaddr…

【大数据-Hadoop】从入门到源码编译-概念篇

【大数据-Hadoop】从入门到源码编译-概念篇 Hadoop与大数据生态&#xff08;一&#xff09;Hadoop是什么&#xff1f;&#xff08;二&#xff09;Hadoop组成1. HDFS1.1 NameNode&#xff08;nn&#xff09;1.2 DataNode&#xff08;dn&#xff09;1.3 Secondary NameNode&#…

记一次堆内外内存问题的排查和优化

为优化淘宝带宽成本&#xff0c;我们在网关 SDK&#xff08;Java&#xff09;统一使用 ZSTD 替代 GZIP 压缩以获取更高的压缩比&#xff0c;从而得到更小的响应包。具体实现采用官方推荐的 zstd-jni 库。zstd-jni 会调用 zstd 的 c 库。 背景 在性能压测和优化过程中&#xff0…

React和Preact 这样处理className更优雅

React和Preact写className&#xff0c;我不太习惯使用模板字符串&#xff0c;不好看&#xff0c;看起来也不直观&#xff0c;写了如下两个库&#xff1a; react-runtime-clsx 和 preact-runtime-clsx&#xff0c;来辅助开发&#xff0c;可以更方便的处理className的问题&#x…

nodejs微信小程序+python+PHP北京地铁票务APP-计算机毕业设计推荐 -安卓

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

STM32F103

提示&#xff1a;来源正点原子&#xff0c;参考STM32F103 战舰开发指南V1.3PDF资料 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 开发环境硬件普中科技&#xff0c;接…

C++相关闲碎记录(6)

1、使用shared_ptr #include <iostream> #include <memory> #include <set> #include <deque> #include <algorithm> #include <string>class Item { private:std::string name;float price; public:Item(const std::string& n, floa…

【Centos】

一、Virtualbox安装Centos 1、Virtualbox 下载地址: Virtualbox 2、Centos 下载地址: Centos 3、Virtualbox安装Centos教程 Virtualbox安装Centos教程: Virtualbox安装Centos教程

光学遥感显著目标检测初探笔记总结

目录 观看地址介绍什么是显著性目标检测根据不同的输入会有不同的变体(显著性目标检测家族)目前这个领域的挑战 技术方案论文1(2019)论文2(2021)论文3(2022) 未来展望 观看地址 b站链接 介绍 什么是显著性目标检测 一张图片里最吸引注意力的部分就是显著性物体&#xff0c;…

vue3 vue-router 导航守卫 (五)

在Vue 3中&#xff0c;导航守卫仍然是一个重要的概念&#xff0c;用于在路由切换时执行一些特定的逻辑。Vue Router提供了多个导航守卫&#xff0c;包括全局守卫、路由独享守卫和组件内守卫。可以在路由切换时执行一些特定的逻辑&#xff0c;例如身份验证、权限控制、数据加载等…

C++STL详解+代码分析+典例讲解

vector 的介绍&#xff1a; 1、vector是表示可变大小数组的序列容器。 2、vector就像数组一样&#xff0c;也采用的连续空间来存储元素&#xff0c;这也意味着可以采用下标对vector的元素进行访问。 3、vector与普通数组不同的是&#xff0c;vector的大小是可以动态改变的。 4、…

基于物联网的智能仓管理系统方案

基于物联网的智能仓管理系统方案 一、项目背景 随着企业业务的快速发展&#xff0c;传统的人工仓库管理方式已经无法满足现代企业的需求。仓库运营效率低下、货物出入库错误、库存不准确等问题不断涌现。因此&#xff0c;我们提出一个基于物联网技术的智能仓管理系统方案&…

Redis 五大经典业务问题

一 缓存穿透 缓存穿透是指当请求的数据既不在缓存中也不存在于数据库中时&#xff0c;请求会直接穿透缓存层&#xff0c;到达数据库层。这通常是由于恶意攻击或者程序错误造成的&#xff0c;比如攻击者故意请求不存在的大量数据&#xff0c;导致缓存不命中&#xff0c;所有的请…

智能优化算法应用:基于被囊群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于被囊群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于被囊群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.被囊群算法4.实验参数设定5.算法结果6.参考文…

Moco框架的搭建使用

一、前言   之前一直听mock&#xff0c;也大致了解mock的作用&#xff0c;但没有具体去了解过如何用工具或框架实现mock&#xff0c;以及也没有考虑过落实mock&#xff0c;因为在实际的工作中&#xff0c;很少会考虑用mock。最近在学java&#xff0c;刚好了解到moco框架是用于…

城市基础设施智慧路灯改造的特点

智慧城市建设稳步有序推进。作为智慧城市的基础设施&#xff0c;智能照明是智慧城市的重要组成部分&#xff0c;而叁仟智慧路灯是智慧城市理念下的新产品。随着物联网和智能控制技术的飞速发展&#xff0c;路灯被赋予了新的任务和角色。除了使道路照明智能化和节能化外&#xf…

安全扫描五项简介

目录 安扫五项 1.代码检测 2.主机基线 nginx合规检查 麒麟基线 3.WEB扫描 4.渗透测试 用户枚举漏洞 漏洞描述 修复建议 点击劫持漏洞 漏洞描述 修复建议 XSS漏洞 漏洞描述 修复建议 3.主机漏洞 超高危漏洞 高危漏洞 中危漏洞 低危漏洞 信息漏洞 参考信息…

用电商API接口获取拼多多的商品详情数据

pinduoduo.item_get_app_pro-根据ID取商品详情原数据 公共参数 API请求地址 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_searc…

一步一步写线程之一简单的开始

一、多线程 多线程不管是在前面的文章分析中还是在网上还是大书籍上&#xff0c;学习C/C多线程编程是无法绕过的&#xff0c;即使使用别人封装好的框架&#xff0c;包括使用STL的一些库&#xff0c;如果仅仅是简单的应用&#xff0c;可能也就过去了。不过&#xff0c;稍微复杂…

VBA_MF系列技术资料1-237

MF系列VBA技术资料 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-04属于定…