一 Ajax篇

1 ajax简介(Asynchronous Javascript And XML)

  异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标记语言),

2 两个特点

  2.1 异步交互

  客服端发出一个请求,无需等待这个请求的响应,就可以发送第二个请求.

  2.2 局部更新

  不会造成网页的覆盖,仅仅是通过jquery的dom操作,使得页面局部发生数据变化.

3 执行流程

4 基于Jquery 的ajax实现(加法计算器)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body> <input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="result"><input type="button" class="cul" value="计算"> {% csrf_token %}
<script>
$('.cul').click(function () {
let num1 = $('.num1').val();
let num2 = $('.num2').val();
console.log(num1, num2);
$.ajax({
url:"/cul/",
type:"post",
data:{
n1:num1,
n2:num2,
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
},
success:function (res) {
console.log(res);
$('.result').val(res);
}
})
}) </script>
</body>
</html>

index.html

  4.1 标签代码

<input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="result"><input type="button" class="cul" value="计算">

标签代码

  4.2 url.py

    path('index/', views.index), #显示主页路由
path('cul/', views.cul), #加法计算路由

  4.3 views.py

def index(request):

    return render(request,'index.html')

def cul(request):
n1=request.POST.get('n1') #获取第一个数
n2=request.POST.get('n2') #获取第二个数
ret=str(int(n1)+int(n2)) #加法运算
return HttpResponse(ret) #返回结果

  4.4 ajax 代码实现

{% csrf_token %}  #为了获取秘钥
<script>
$('.cul').click(function () {
let num1 = $('.num1').val(); #获取输入框的第一个参数
let num2 = $('.num2').val(); #获取输入框的第二个参数
#ajax 的开始
$.ajax({
url:"/cul/", #ajax 请求的url
type:"post", #ajax 请求方式
data:{ #ajax 请求的数据
n1:num1,
n2:num2,
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), #获取秘钥
},
success:function (res) { #成功响应的回调函数,res为响应体内容
console.log(res);
$('.result').val(res);
}
})
})
</script>

5 ajax请求的参数

url : 请求的路径  如 url:"/index/"

type:请求的方式 如 type:"get",

data:请求的数据, 如 data:{a:1,b:2...}

contentType:请求体的编码类型 ,仅用于post请求

processData:处理数据方式

success:成功回调函数,res响应体数据

6 ajax前后端交互推荐使用json格式的数据传输

py文件

json.dumps('字典') #把字典序列化为json字符串

json.loads('json字符串') #把json字符串反序列化为字典

html文件

JSON.stringify('obj') #把自定义对象转化为json字符串

JSON.parse('json字符串') #把字符串转换为自定义对象

JsonResponse :只需要后端使用JsonResponse传递json字符串,后端会自动反序列化赋值给res

    res={"code":200,"data":None,"msg":None}
return JsonResponse(res)

二 文件上传篇

1 请求头

  ContentType指的是请求体的编码类型,常见的类型共有3种:

  1 .1 application/x-www-form-urlencoded

  最为常见的POST提交数据的方式,如果不设置enctype属性,默认的POST提交数据的方式就是application/x-www-form-urlencoded,请求头信息,如下

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;
charset=utf-8 user=yuan&age=22

  1.2 multipart/form-data

  form表单提交文件必须将 enctype=multipart/form-data,请求信息示例

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=---- WebKitFormBoundaryrGKCBY7qhFd3TrwA
#分割标识符,只要这个分割标识符一致,则说明是同一个文件 ------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user" yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

form-data提交文件的数据格式

  1.3 application/json

  form表单里面enctype=application/json,数据以json字符串方式提交,django不会解析json 字符串,需要自己反序列化

提交数据形式
'{"a":1,"b":2...}' django解析数据
import json json.loads(request.Body.decode())

2 form表单提交文件

  2.1 模板部分

<form action="" method="post" enctype="multipart/form-data">
用户名 <input type="text" name="user">
头像 <input type="file" name="file">
<input type="submit">
</form>

  2.2 视图部分

def file(request):
print(request.POST)
print(request.FILES)
file_obj = request.FILES.get('file') #get('后端传入的name') 获取到文件句柄
name=file_obj.name #获取文件名
#读取文件,写入文件
with open(name,'wb')as f:
for line in file_obj:
f.write(line) return HttpResponse('上传成功')

3 基于ajax的文件上传

<h3>Ajax的文件上传</h3>

<form>
{% csrf_token %}
<input type="text" class="user">
<input type="file" class="file">
<input type="button" value="submit" class="ajax_btn2"> </form>

html代码

<script>
$(".sub_btn").click(function () {
let formdata=new FormData; //创建FormData对象,代表文件传输
formdata.append("user", $('.user').val());
formdata.append("file", $('.file')[0].files[0]);
formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val(),)
$.ajax({
url:'/file/',
type: 'post',
processData:false, //不让指定数据处理方式
contentType:false, //不让指定传输格式
data:formdata, //formdata对象自带数据处理方式和传输格式
}) })
</script>

ajax 实现文件上传

def put2(request):
print(request.POST)
print(request.FILES) file_obj=request.FILES.get("file")
print(file_obj.name)
name=file_obj.name
with open(os.path.join("media","imgs",name),"wb") as f_w:
for line in file_obj:
f_w.write(line) return HttpResponse('上传成功!')

wiews.py 处理函数

三 补充篇---Ajax 使用Json 数据格式进行数据交互

1 contentType:"json", #规定传输格式为"json"

2 data:JSON.stringify({ #传输的数据转换为json字符串数据
a:1,
b:2
}),
<script>
#默认的contType: urlencoded
$(".ajax_btn").click(function () {
$.ajax({
url:"/put1/",
type:"post",
data:{
a:1,
b:2
},
success:function (res) {
console.log(res)
}
})
}) #json字符串传输数据 $(".ajax_btn2").click(function () {
$.ajax({
url:"/put1/",
type:"post",
contentType:"json",
data:JSON.stringify({
a:1,
b:2
}),
success:function (res) {
console.log(res)
}
})
})
</script>

ajax 代码演示

Ajax 与文件上传的更多相关文章

  1. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  2. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

  3. ajax与文件上传

    一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...

  4. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  5. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  7. Django学习笔记之Ajax与文件上传

      Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

  8. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  9. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

随机推荐

  1. JS判断客户端是否是iOS或者Android手机移动端(转载)

    前言: 上午有一个移动端的项目负责人问我,在ios系统上样式出现问题,因为内核原因,我改来改去,在ios弄好了,但在安卓有问题了,突然想到了一种办法,既然ios是一种机型,安卓是一种机型,可以检测用户 ...

  2. Linux下的C#连接Mysql数据库

    今天在尝试在 Linux 系统下使用C#连接数据库,发现网上这方面的信息很少,所以就写一篇博客记录一下. Linux下这里使用的是mono. 首先是缺少Mysql.Data.dll这个库的,所以需要安 ...

  3. [二十五]JavaIO之RandomAccessFile

    功能简介 我们之前一直说流顺序的,不能随机访问,的确之前说的IO体系的确如此 但是 RandomAccessFile自成一派 此类的实例支持对随机访问文件的读取和写入 我们之前介绍过DataOutpu ...

  4. Django学习笔记(7)——单表操作和多表操作

    单表操作 1,创建模型 创建名为book的APP,在book下的models.py中创建模型: from django.db import models # Create your models he ...

  5. k8s架构分析(二)--技术流ken

    master节点 k8s的集群由master和node组成,节点上运行着若干k8s服务. master节点之上运行着的后台服务有kube-apiserver .kube-scheduler.kube- ...

  6. .Net语言 APP开发平台——Smobiler学习日志:如何快速实现手机上的资源上传功能

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的“Smobil ...

  7. ECMASCript 2019可能会有哪些特性?

    最近这些年,ECMASCript标准发展节奏非常稳定,每年都会发布新的特性.那么,ECMASCript 2019可能会有哪些特性呢? ECMASCript语法提案的批准流程 JavaScript的标准 ...

  8. Fundebug后端Java异常监控插件更新至0.2.0,支持Spring及Maven

    摘要: 0.2.0支持监控Spring应用,并且支持使用Maven接入插件,请大家及时更新. 支持监控Spring应用 1. pom.xml配置fundebug-spring依赖 <depend ...

  9. Python学习基础笔记(全)

    换博客了,还是csdn好一些. Python学习基础笔记 1.Python学习-linux下Python3的安装 2.Python学习-数据类型.运算符.条件语句 3.Python学习-循环语句 4. ...

  10. Linux设备驱动之IIO子系统——IIO框架数据读取

    IIO DATA ACCESS IIO数据获取 只有两种方法可以使用IIO框架访问数据; 通过sysf通道进行一次性捕获,或通过IIO字符设备进行连续模式(触发缓冲). One-shot captur ...