Django与Ajax -云博客

Django与Ajax

# 前端 2024-05-05 15:07 0 37 来源：云博客

Ajax

Ajax(asynchronous JavaScript And XML):异步javascript和xml。即使用javascript语言与服务器进行异步交互，传输的数据是xml(现在大部分都是使用json)

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
异步交互：当客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求

同步交互

浏览器地址栏，默认是get请求
form表单：get请求，post请求
a标签，默认是get请求

Ajax(异步交互)：特点

异步请求
浏览器局部刷新

基于jQuery的Ajax实现

<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="/static/jQuery.js"></script></head><body> <h2>Index</h2> <button class="Ajax">ajax</button> 用户名<input type="text" class="inp"> <p></p> <script> $(‘.Ajax‘).click(function () { {# 单击按钮发送ajax请求#} $.ajax({ {#请求url#} url:"/test_ajax/", {#发送类型#} type:‘get‘, {#发送的数据#} {#data:{},#} {#回调函数:某个函数执行结束后执行的函数#} success:function (data) { console.log(data); $(‘p‘).html(data) } }) } ) </script></body></html>

文件上传

contnetType

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

application/x-www-form-urlencoded
这是最常见的post提交数据的方式。浏览器的原生表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据(默认),请求类似与下面：

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

multipart/form-data
使用表单上传文件时，必须让表单的 enctype 等于 multipart/form-data

单也只支持这两种方式（通过元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用的非常少

application/json

用来告诉服务端消息主体是序列化后的JSON 字符串，目前json使用的是非常非常多的，很多服务端语言都支持json，在服务端进行处理时需要先编码然后再使用json转换为具体的对象

基于form表单的文件上传

文件上传时需要将form表单的enctype属性设置为multipart/form-data

file_put.html

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

views.py

def file_put(request): if request.method == ‘GET‘: return render(request,‘file_put.html‘) else: file_obj = request.FILES.get(‘img‘) print(file_obj) # <MultiValueDict: {‘user‘: [<InMemoryUploadedFile: miao.jpg (image/jpeg)>]}> with open(file_obj.name,‘wb‘) as f: for line in file_obj: f.write(line) return HttpResponse(‘OK‘)

基于Ajax的文件上传

视图函数中处理文件与form处理文件一样

<form action="" method="post" enctype="multipart/form-data"> 用户名<input type="text" id="user"> <input type="file" id="img"> <input type="button" id="btn" value="ajax"></form><script> $(‘#btn‘).click(function () { {#基于ajax上传文件固定格式#} var formdata = new FormData(); formdata.append(‘user‘,$(‘#user‘).val()); {# $(‘#img‘)[0].files[0] 拿到form表单中的文件#} formdata.append(‘img‘,$(‘#img‘)[0].files[0]); $.ajax({ url:‘‘, type:‘post‘, {#是否对数据做预处理 固定写法#} contentType:false, processData:false, data:formdata, success:function (data) { console.log(data) } }) })</script>