Fifty, Ajax data transmission, the sequence of components, sweetalert build pages, custom pager

MTV and MVC model
django framework claim to be MTV framework
M: Models
T: Templates
V: views

MVC
M: Models
V: views
C: the Controller Controller (urls)
nature: MTV actually MVC






Ajax
asynchronous submit partial refresh
request methods GET POST
a tag href attribute GET request
browser window input URL GET request
form form GET / the POST
ajax GET / the POST

first ajax this technology is js in
but native js operation ajax cumbersome, here for efficiency
using jQuery packaged version directly ajax's



biggest advantage is AJAX without reloading the entire page, you can exchange data with the server and update parts of the page content.
(This feature is the feeling to the user request and response process is completed unknowingly


contentType front end of the transmission data encoding formats
before and after transfer of data encoding formats
1.urlencoded
2.formdata
3.json

form Form
encoding format is used by default urlencoded
data format: name = & pwd = 123 Jason
Django rear resolved automatically urlencoded encoding format for the data and for the user into the acquired request.POST

may be modified to pass formdata file
django backend for as long as is consistent with the data urlencoded encoding format (name = jason & pwd = 123 ) will automatically parse and put request.POST for users to get
if you specify a file as long as the code is automatically parsed and put formdata request.FILES in
summary: front and rear end of the transmission of data when you must ensure that your data formats and encoding format is the same family can not lie !!!

ajax submit data
1.ajax default data is presented in a way urlencoded
Front:
      . $ ( '# B1') ON ( 'the Click', function () { 
                       Alert (123) 
                       // Click post toward the rear end transmission request 
                       $ .ajax ({ 
                           URL: '', // transmitted to the control Who wrote It is submitted towards the current address 
                           type: 'post', // transmission scheme is a post request 
                           data: { 'i1': $ ( '# i1') val (), 'i2':.. $ ( '# i2') val ()}, // data transmission 
                           success: function (data) {// data for receiving the result of the asynchronous parameter submitted 
                               Alert (data) 
                               // rear end result computed by the input to the third rendering operation DOM ore 
                               $ ( '# I3'). Val (Data) 
                           } 

                       })

rear end:
              index DEF (Request): 
                     IF request.is_ajax (): # to verify that a request is sent ajax, if it is True, then the note is to true 
                               Print (123) 
                               IF request.method == "the POST": 
                                   Print (123) 
                                   request.POST.get = D1 ( "D1") 
                                   D2 = request.POST.get ( "D2") 
                                   RES = int (D1) + int (D2) 
                                   return the HttpResponse (RES) # ajax back to the callback data in 
                           return render (request, "index.html")
2.ajax data transmission format json
django json rear end for the data format does not automatically resolved or put request.POST request.FILES which
it does not parse json format data intact but it on request. body in the
front end:
$ ( '# B1') ON ( 'the click', function () {.
Alert (123)
// click button to send request toward the rear end post
$ .ajax ({
URL: '', // control who do not write to a current address is submitted towards the
type: 'post', // transmission scheme is a post request
data: JSON.stringify ({ 'username' : 'jason', 'password': 123}), // transmitted data
contentType: 'application / json', // tell you the back-end data is json format

success:function (data) {// data parameter to receive asynchronous results submitted
Alert (Data)
// rear end result computed by the rendering operation to the third input DOM ore
$ ( '# I3') Val (Data).
}
})
{)
rear : def index (request):
request.method == IF "the POST":
Print (of request.POST)
Print (request.body) # acquired through the front end of the transmission format json dictionary binary
json_str = request.body.decode ( "utf8") # decoded binary
s = json .loads (json_str) # deserialization json string
print (s.get ( "username") ) # value
the HttpResponse return ( "OK")
return the render (Request, "index.html")

3.ajax transfer files
// ajax file transfer
front end:
  $ ( '# D4') ON ( 'the Click', function () {. 
                       var formData the FormData new new = (); // can pass either normal key-value pair may be a file transfer 
                       formData.append ( 'username', 'jason '); 
                       formData.append (' PSW ',' 123 '); 
                       // 1. Find the first file is stored to use jQery input tag 
                       // 2. jQery objects will be transferred into native objects js 
                       @ 3 js objects using native . approach .files [0] storing the acquired file object tag inside 
                       formData.append ( 'my_file', $ ( '# d5') [0] .files [0]); // get the file stored in the file label Object 

                       $ .ajax ({ 
                           url: '', // put to control who does not write is the default current submission 
                           of the type: 'POST', 
                           the Data:formData, // transfer data is formData
                           // ajax to send the file you need to specify two additional parameters
                           processData: false, // do not tell the front processing data 
                           contentType: false, // do not use any encoding, FormData their own coding, rear Django can automatically identify 
                           success: function (data) {// callback function, the data transmission returns data to the back end for receiving a result of the asynchronous parameter submitted 
                               Alert (data); 
                               . $ ( '# D3') Val (data) 
                               } 
                           })
                       

rear end:
# Ajax transfer files to the backend 
                           IF request.method == " POST " :
                                Print (request.FILES)     # get a dictionary file 
                               with Open ( " Today's content " , " wb " ) AS f:      # write to file 
                                   for Line in request.FILES.get ( " my_file " ): 
                                       f.write (Line) 
                               Print (request.POST)    # get the normal data delivery 
                               Print (request.POST.get ( " username" ))    # Get normal data conveyed 
                               return the HttpResponse ( " OK " ) 

                           return the render (Request, " index.html " )

 

Guess you like

Origin www.cnblogs.com/wukai66/p/11575457.html