Django，Ajax，文件上传，ajax发送json数据，基于Ajax的文件上传

JSON

JSON指的是JavaScript对象方法（JavaScript Object Notation）
JSON是轻量级的文本数据交换格式
JSON独立于语言
JSON具有自我i描述，更易理解

Ajax

　　　　　AJAX(Asynchronous Javascript And XML) 翻译内容即“异步Javascript和XML”。即使用Javascript语言与服　　　　　　　　　　务器机型异步交互，传输数据为XML。 PS：传输数据不知是XML，JSON数据更常用

　　　　　AJAX除异步的特点外，还有浏览器页面局部刷新功能。

发送请求给服务器的途径

1. 地址栏：get
2. form表单：支持get与post
3. 超链接：click是get方式
4. Ajax请求：可以指定get和post PS：发Ajax请求一半返回HttpResponse()

简单的Ajax请求

　　修改views视图

 1 from django.shortcuts import render,HttpResponse,redirect
 2 from django.views import View
 3 
 4 # Create your views here.
 5 
 6 class Upload(View):
 7     def get(self,request):
 8         return render(request,'upload.html')
 9     def post(self,request):
10         print('已执行')
11         return HttpResponse('提交成功')

View Code

　　修改HTML

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}
<input type="text" name="usm"><br>
<input type="password" name="pwd"><br>
<input type="file" name="file"><br>
<input type="button" value="提交" id="btn"><br>
<span class="conent"></span>
<script src="{% static 'js/jquery-3.4.1.js' %}"></script>

</body>
<script>
    $('#btn').click(function () {
        var csrf_data=$('[name=csrfmiddlewaretoken]').val();
        console.log(csrf_data);
        $.ajax({
            url:'{% url "upload" %}',
            type:'post',
            data:{
                csrfmiddlewaretoken:csrf_data
            },
            success:function (response) {
                $('.conent').text(response);
                alert(response)
            }
        })
    })
</script>
</html>

View Code

　　修改urls路由

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'upload/',views.Upload.as_view(),name='upload'),
]

View Code

基于Ajax的文件传输

　　　修改views视图

from django.shortcuts import render,HttpResponse,redirect
from pydiango4 import settings
from django.http import JsonResponse
import os

# Create your views here.

def login(request):

    return render(request,'login.html')

def index(request):
    # if request.method=='POST':
    #     print('ok')
    print('已跳转')
    usm=request.POST.get('usm')
    pwd=request.POST.get('pwd')
    print(usm,pwd)
    if usm=='wmm' and pwd=='123':

        return HttpResponse('1')
    else:
        return HttpResponse('no')

def upload(request):
    if request.method=='POST':
        file_obj=request.FILES.get('hede')
        # 接收文件用FILES而不是POST/GET
        path=os.path.join(settings.BASE_DIR,'static_file','img',file_obj.name)
        with open(path,'wb')as f:
            for chunks in file_obj.chunks():
                # chunks()每次读取数据大小是稳定的
                f.write(chunks)
        dic={'asd':12,'zxc':15}
        return JsonResponse(dic,safe=True)
        # JsonResponse()用于将数据转化为json数据并返回
        # safe=True 当传输数据 非字典 类型时需要safe=False

View Code

　　　修改HTML

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" action="{% url 'upload' %}" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="hede">
    <input type="submit" id="btn">
</form>
</body>
<script src="{% static 'js/jquery-3.4.1.js' %}"></script>
<script>
$('#btn').click(function(){
    var formdata=new FormData();
    var file=$('[name=hede]')[0].files[0];
    var csrf_data=$('[name=csrfmiddlewaretoken]').val();
    formdata.append('file',file);
    formdata.append('csrfmiddlewaretoken',csrf_data);
    $.ajax({
        url:'{% url "login" %}',
        type:'post',
        data:formdata,
        processData:false,
        contentType:false,
        success:function () {

        }

    })
})

</script>
</html>

View Code

　　　修改urls路由

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'login/',views.login,name='login'),
    url(r'index/',views.index,name='index'),
    url(r'upload/',views.upload,name='upload'),
]

View Code