Illustrates the frame ## Django
Front and rear ends ## encoding format to transmit data
# Encoding format to transmit data front and rear ends . 1 .urlencoded 2 .formdata 3.Application / JSON
## From Ajax form and send back the file at the tip end
form form default encoding format is not supported urlencoded issued a document (only the file name sent in the past) it corresponds to the data format username = password = 123 & Jason request.POST only parse data urlencoded data format formdata django will help you file data request.FILES taken out into the inside designed to transfer the file encoding format Ajax default submission also urlencoded when django will not do anything with the data transmission time ajax json format data in binary form on request.body you can manually decoding plus get deserialized data dictionary format corresponding Ajax to send json format data
$ .ajax ({
url: '', // do not write default url address of the current page is located towards the submission
of the type: 'POST',
contentType: 'the Application / JSON ',
Data: the JSON.stringify ({' name ':' Jason ',' csrfmiddlewaretoken ':' csrf_token {} {} '}),
Success:function (Data) {
Alert (Data)
}
}) Ajax js transmitted using the built-in file objects FormData
DEF index (Request): IF request.method == ' the POST ' : Print (of request.POST) Print (request.FILES) # file_obj = request.FILES.get ( 'myfile') # Print (file_obj.name) # View the current filename of the file object # form a pass over form data is written to a local file server (note: not the default encoding urlencoded, but modified to = enctype "multipart / form-the data">) # with Open (file_obj.name, 'WB') AS F: # for Line in file_obj: # f.write (Line) # Ajax binary data is sent over a separate data in the request.body, may be decoded to obtain the data dictionary is then serialized format # Print ( request.body) # bytes_str = request.body # res = json.loads(bytes_str.decode('utf-8')) # print(res,type(res)) return render(request,'index.html')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
{#<form action="" method="post" enctype="multipart/form-data">#}
{# {% csrf_token %}#}
{# <p>username:<input type="text" name="username"></p>#}
{# <p>password:<input type="password" name="password"></p>#}
{# <p>image:<input type="file" name="myfile"></p>#}
{ # <INPUT type = "Submit"> #}
{ # </ form> #}
<INPUT type = " File " name = " myfile " ID = " D2 " >
<Button ID = " D1 " > Point I </ Button>
<Script>
$ ( ' # D1 ' ) .click (function () {
// if necessary with the use of built-in object FormData ajax file transmission
var formData = FormData new new (); // creates a built-in object
// built-in objects formdata can either pass an ordinary key-value pairs, you can also transfer files
formData.append('name', ' Jason ' ); // common key-value pair
formData.append ( ' password ' , ' 123 ' );
// file transfer
var fileObj = $ ( ' # D2 ' ) [0] .files [0]; // 0 then go to get the index file to obtain the object label object into a native js built-in objects to get the list of files methods
formData.append ( ' myfile ' ;, fileObj)
$ .ajax ({
: URL '' , // do not write default submission towards the url address of the current page is located
of the type: ' POST ' ,
//Note that you need to manually specify ajax two special parameters when sending files
contentType: false, // do not use my own coding formdata can use any encoding
processData: false, // the browser not to deal with what is my data on what
Data: formData,
Success: function (Data) {
Alert (Data)
}
})
})
</ Script>
</ body>
</ HTML>
## page add clear cache
