Chapter one django Installation and introduction
Chapter two django Based on using
The third chapter The routing layer
Chapter four A virtual environment 、django Version difference 、 View layer
The fifth chapter Formwork layer
Chapter six The model layer （ On ）
Chapter vii. The model layer （ Next ）
Chapter viii. ajax
When the page is not refreshed, it can interact with the back end to realize asynchronous submission and local refresh
ajax Not a new knowledge The essence is some js Code We learn ajax Use it directly jQuery The version after encapsulation ( The grammar is simpler ) Use ajax The premise of must be introduced jQuery file
$('#btn').click(function () {
// Get the data in the two boxes
let i1Val = $('#i1').val();
let i2Val = $('#i2').val();
// send out ajax Request to transmit data
$.ajax({
url:'', // If you don't write, the default is the address of the current page
type:'post', // Specify the current request method
data:{
'i1':i1Val,'i2':i2Val}, // Request data to carry
success:function (args) {
// Asynchronous callback function There is a reply on the back end, which is automatically triggered
$('#i3').val(args)
}
})
})
form The default sending format of the form ：
Content-Type: application/x-www-form-urlencoded
data format :username=jason&password=123
django The back end will automatically process to :request.POST
form Form send file ：
Content-Type: multipart/form-data
data format : Hide from view
django The back end will process automatically :request.POST request.FILES
ajax Default encoding format ：
Content-Type: application/x-www-form-urlencoded
data format :username=jason&password=123
django The back end will automatically process to :request.POST
ajax The type of data sent must be consistent with the coding format of the data
The encoding format is urlencoded
The data format should be username=jason&password=123
But you sent json Format data
django Back end access json Format data will not be processed It's just request.body Inside
We need to deal with it ourselves
$('#d1').click(function () {
$.ajax({
url:'',
type:'post', // Don't write default get request
contentType:'application/json', // Do not write default is urlencoded code
data:JSON.stringify({
'name':'jason','pwd':123}), // Serialization method
success:function (args) {
}
})
})
$("#d1").click(function () {
// Need to use built-in js Built-in objects FormData
let myFormData = new FormData();
// Object to add normal data
myFormData.append('username',$('#name').val())
myFormData.append('password',$('#pwd').val())
// Object to add file data
myFormData.append('my_file',$('#file')[0].files[0])
// send out ajax request
$.ajax({
url:'',
type:'post',
data:myFormData,
// Carry the two parameters that must be specified in the file
contentType:false,
processData:false,
success:function (args) {
// Handle the results returned by the asynchronous callback
}
})
})
Use ajax Interaction All operations will no longer directly affect the entire page ( Local operation )
Need to be in success Callback function to complete the subsequent operations we need
