010---Django与Ajax
- 预备知识:
什么是Json?- 定义:json是一种轻量级的数据交换格式。
如果我们要在不同的编程语言中传递对象,就必须把对象序列化为标准格式,比如XML,但那是以往的时代,现在大多数使用序列化为json,因为json本身就是一个字符串,层次清晰,易阅读可以被所有语言读取,也方便的存储到磁盘和网络传输。
格式:一个无序的key:value集合。{"k1":"v1","k2":"v2"}- 在程序运行过程中。所有的变量都是存在内存中。一旦程序结束,变量也会被销毁。
所以:
序列化:我们把变量从内存中变成可存储或者可传输的过程称为序列化
反序列化:把变量内容从序列化的对象重新读取到内存里称为反序列化- 在js里面有两个常用方法实现json字符串和json对象互转
- json对象---json字符串
JSON.stringify():
console.log(JSON.stringify({'name':'xjm'));- json字符串---js对象
JSON.parse()
console.log(JSON.parse('{"name":"xjm})');
注意:
json对象属性名必须是双引号
不能使用undefined;
不能是函数和日期对象
- Ajax
ajax:翻译成中文就是异步JavaScript和XML。就是使用JavaScript语言与服务器进行异步交互,传输的数据为xml,当然现在不只是xml,更多的是使用Json数据- 特点:
异步交互:客户端发出一个请求后,无需等服务器响应结束,就可以发出第二个请求
局部刷新:给用户的感受是在不知不觉中完成请求和响应过程,无需刷新整个页面
- 场景:
注册的错误提示:该用户已注册、该用户名已被使用等
百度等搜索引擎的输入框提示:输入一个python关键词后会出现一个下拉列表,这里用到了ajax技术,当输入框输入变化时,浏览器会偷偷向服务器发送一个请求,然后接收响应显示。
- 基于Jquery的Ajax实现
- <button class="send_Ajax">send_Ajax</button>
- <script>
- $(".send_Ajax").click(function(){
- $.ajax({
- url:"/handle_Ajax/",
- type:"POST",
- data:{username:"Yuan",password:},
- success:function(data){
- console.log(data)
- },
- error: function (jqXHR, textStatus, err) {
- console.log(arguments);
- },
- complete: function (jqXHR, textStatus) {
- console.log(textStatus);
- },
- statusCode: {
- '': function (jqXHR, textStatus, err) {
- console.log(arguments);
- },
- '': function (jqXHR, textStatus, err) {
- console.log(arguments);
- }
- }
- })
- })
- </script>
- $.ajax()参数
- 请求参数:
url:请求路径
type:请求类型,默认get
data:{a:1,b:2} ajax默认get请求 默认urlencoded编码类型提交数据 /?a=1&b=2
processData:声明当前的data数据是否进行转码或预处理 默认True
contentType:发送数据时的编码类型
- 请求头ContentType
是指请求体的编码类型,常见的有三种:- 1、application/x-www-form-urlencoded
- 最常见的post提交数据的方式,form表单如果不设置enctype属性,那么默认就是这种方式提交
POST http://www.123@qq.com HTTP:/1.1
Content-Type:application/x-www-form-urlencoded;charset=utf-8- username=jzy&age=22
2 、multipart/form-data
这也是一个常见的post提交数据的方式。我们使用表单上传文件时,必须在form中添加enctype=multipart/form-data/- Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png- 3、application/json
这个作为响应头大家应该不陌生,但是现在越来越多的人把它作为请求头。用来告诉服务端消息主体是序列化后的json字符串。
- 响应参数:
dataType:预期服务端返回的数据类型,服务端返回的数据会根据这个值解析后,传递给回调函数。
- csrf跨站请求伪造
- data:{
- "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();
- }
- $.ajax({
- headers:{"X-CSRFToken":$.cookie('csrftoken')}
- })
- 基于form表单的文件上传
- 模板部分:
- <form action="" method="post" enctype="multipart/form-data">
- 用户名 <input type="text" name="user">
- 头像 <input type="file" name="avatar">
- <input type="submit">
- </form>
- 视图部分:
- def index(request):
- print(request.body) # 原始的请求体数据
- print(request.GET) # GET请求数据
- print(request.POST) # POST请求数据
- print(request.FILES) # 上传的文件数据
- return render(request,"index.html")
- 基于Ajax的文件上传
- 模版部分
- <h3>基于Ajax文件上传</h3>
- <form>
- 用户名:<input type="text" id="user">
- 密码:<input type="password" id="pwd">
- <p>头像:<input type="file" id="head_imgurl"></p>
- <!--input 的type类型一定不能是submit-->
- <input type="button" value="Json" class="json按钮">
- <input type="button" value="Ajax" class="ajax按钮">
- </form>
- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
- <script>
- //发送json数据
- $('.json').click(function () {
- $.ajax({
- url: '',
- type: 'post',
- contentType: 'application/json',
- data: JSON.stringify({
- a: ,
- b:
- }),
- success: function (data) {
- console.log(data)
- }
- })
- });
- //ajax文件上传
- $('.ajax').click(function () {
- var formdata=new FormData();
- formdata.append("user",$('#user').val());
- formdata.append("pwd",$('#pwd').val());
- formdata.append("head_imgurl",$('#head_imgurl')[].files[])
- $.ajax({
- url:'',
- type:'post',
- contentType:false, // 不设置内容类型
- processData:false, // 不处理数据
- data:formdata,
- success:function (data) {
- console.log(data);
- }
- })
- })
- </script>
- 视图部分
- def file_put(request):
- if request.method == 'POST':
- print(request.body) # 请求报文
- print(request.POST) # 只有请求头是urlencoded时,才有数据
- # data = request.body.decode('utf-8')
- # import json
- # print(json.loads(data).get('a'))
- # print(json.loads(data).get('b'))
- # user = request.POST.get('user')
- # 获取文件对象
- file_obj = request.FILES.get('head_imgurl')
- # 文件名称:file_obj.name
- with open(file_obj.name,'wb') as f:
- for line in file_obj:
- f.write(line)
- return HttpResponse('ok')
- return render(request,'file_put.html')
010---Django与Ajax的更多相关文章
- python Django之Ajax
python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步 ...
- django 接受 ajax 传来的数组对象
django 接受 ajax 传来的数组对象 发送:ajax 通过 POST 方式传来一个数组 接收:django 接受方式 array = request.POST.getlist(‘key[]’) ...
- python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django使用AJAX调用自己写的API接口
Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- Django之Ajax提交
Ajax 提交数据,页面不刷新 Ajax要引入jQuery Django之Ajax提交 Js实现页面的跳转: location.href = "/url/" $ajax({ url ...
- Django框架第九篇--Django和Ajax、序列化组件(serializers)、自定义分页器、模型表choice参数
Django和Ajax 一.什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语 ...
- Django之AJAX传输JSON数据
目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...
- Django之ajax(jquery)封装(包含 将 csrftoken 写入请求头方法)
由于支持问题,未使用 es6 语法 _ajax.js /** * 发起请求 * @param url 请求地址 * @param data 请求数据 { } json格式 * @param type ...
- Django学习——图书管理系统图书修改、orm常用和非常用字段(了解)、 orm字段参数(了解)、字段关系(了解)、手动创建第三张表、Meta元信息、原生SQL、Django与ajax(入门)
1 图书管理系统图书修改 1.1 views 修改图书获取id的两种方案 1 <input type="hidden" name="id" value=& ...
随机推荐
- fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤)(转)
fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤) Fiddler 有一个filters可以很好的帮助我们只显示我们关系的请求或 ...
- Android Recyclerview隐藏item的所在区域显示大空白问题的解决方案
最近搞了下Recyclerview,做了增加.删除item的功能.item上方有卡签 插个图片看下效果,点击底下的添加上去,同时,底下的item消失,这个用notifyItemInserted和not ...
- Java—数组和方法
数组 声明数组 数组类型[] 数组名;or 数据类型 数组名[]; 如:int[] scores; 分配空间 数组名 = new 数据类型[数组长度];如:scores = new int[5]; 以 ...
- 回归JDK源代码(2)Enumeration<E>接口
现在的Java程序员习惯使用Iterator<E>接口或者增强for循环来遍历集合.如果回到JDK 1.0,Enumeration接口则是遍历向量.哈希表的不二之选.本节就解读和翻译一下E ...
- 获取当前事件对象及this的用法
js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h ...
- vos套餐设置
为实现对客户不同时段按不同费率计算,可以在vos里设置套餐, 具体案例: 1. 2.时段费率 套餐里没包含的时间段是不能打电话的 即:周一到周五 21:30—24:00 00:00- ...
- js从入门到精通到深入到就业
本篇博客是我参看人家代码做的总结,个人感觉非常非常好,简单.步步深入,不用花大量时间来学完正本js,只需要把其中的代码理解透彻,上班无压力(上班无压力是指js部分,包括查看框架源代码都有很大帮助) / ...
- SINAMICS S120屏蔽报警
通用的报警屏蔽方法: P2118 = 需要屏蔽的报警号 P2119 = 屏蔽的方式
- Sublime Text3 + Markdown + 实时预览
Sublime Text3是一款给力的文本编辑器,通过安装插件可以编辑Markdown文本,在编辑Markdown文本的同时可以实时预览编辑效果. 安装准备: 找到菜单栏:Preferences → ...
- Android 中间白色渐变到看不见的线的Drawable
用gradient <gradient android:startColor="#00ffffff" android:centerColor="#ffffff&qu ...