Choices field :
Value:
MTV and MVC model
MTV
django framework claim to be MTV framework
M:models
T:templates
V: views
MVC
M:models
V: views
C: controller controller (URLs)
Nature : MTV actually MVC
Ajax
Features: Asynchronous submit partial refresh
Request method GET POST
a tag href attribute GET request
Browser window enter the url GET request
form Form GET / POST
ajax GET/POST
Summary:
First ajax this technology is js in
But the native js operating ajax more complicated , we are here in order to improve efficiency
Directly jQuery encapsulation version ajax
AJAX biggest advantage is 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)
Small exercises
There are three page input box
Two first input of the input digital box
Click the button to send ajax case of a request without refreshing the page
The third box automatically calculates the sum of two numbers
Core code:
$('#b1').on('click',function () {
{#alert(123)#}
// Click the button to send toward the rear end post request
$.ajax({
url: '', // control who does not write is sent to North Korea to submit a current address
type: 'post', // transmission scheme is post request
data: { 'i1': $ ( '# i1') val (), 'i2':.. $ ( '# i2') val ()}, // data transmission
success: function (data) {// data parameter for receiving the result of the asynchronous filed
{#alert(data)#}
// The rear end of the computed results DOM rendering operation to the third input box
$('#i3').val(data)
}
})
})
Ajax basic usage :
Small example:
Front and rear ends the transmission data encoding format:
contentType front end of the transmission data coding format
Front and rear ends the transmission data encoding format
1.urlencoded
2.formdat to
3.json
form form
The default encoding format using a urlencoded
Data format : name = jason & pwd = 123
django rear end for urlencoded automatically parsed data encoding format and placed request.POST for users to obtain
It can be modified to formdata file transfer
django rear end for as long as is consistent urlencoded data encoding format (name = jason & pwd = 123 ) will automatically parse and placed request.POST user acquired for the
If a file as long as you specify the encoding is formdata will automatically parse and put request.FILES in
Summary : When the front and rear end of the transmission of data must ensure that your data formats and encoding format is the same (such as enctype default urlencoded and you upload a file, it will put request.post in)
ajax modified data transmission format:
ajax submit data
ajax default data submission is urlencoded
ajax transmission json format data
django backend for json data format does not automatically parsed into request.POST or request.FILES inside
It does not parse json format data but it intact on request.body in the
$('#b1').on('click',function () {
alert(123)
// Click the button to send toward the rear end post request
$.ajax({
url: '', // control who does not write is sent to North Korea to submit a current address
type: 'post', // transmission scheme is post request
data: JSON.stringify ({ 'username' : 'jason', 'password': 123}), // data transmitted
contentType: 'application / json', // tell you the back-end data is json format
success: function (data) {// data parameter for receiving the result of the asynchronous filed
alert(data)
// The rear end of the computed results DOM rendering operation to the third input box
$('#i3').val(data)
}
})
// {)
ajax transfer files
// ajax transfer files
$('#b1').on('click',function () {
// ajax transfer files is recommended to use built-in objects formdata
var formData = new FormData (); // may be transmitted on a common key can be a file transfer
// add a normal key
formData.append('username','jason');
formData.append('password','123');
// transfer files
// how to obtain the documents stored in the label file objects ? Fixed grammar
// 1. first with jQery find stored files input label
// 2. The jQuery object into a native js objects
// 3. The use of native js object methods .files [0] is acquired in the internal storage label file object
// 4. Be sure to specify both arguments are false
formData.append('my_file',$('#d1')[0].files[0]);
$.ajax({
url: '', // control who does not write is sent to North Korea to submit a current address
type: 'post', // transmission scheme is post request
formData, //: data data transmitted
// ajax to send the file you need to specify two additional parameters
processData: false, // tell the front not to process the data
contentType: false, // do not apply any coding because formdata object itself carrying coded django rear end can recognize formdata objects
success: function (data) {// data parameter for receiving the result of the asynchronous filed
{#alert(data)#}
// The rear end of the computed results DOM rendering operation to the third input box
$('#i3').val(data)
}
})
})
Serialization components:
from django.core import serializers # django comes with a small tool sequence
def reg(request):
user_list = models.User.objects.all()
res = serializers.serialize('json',user_list)
return render(request,'index.html',locals())
Res:
[{
"model": "app01.user",
"pk": 1,
"fields": {
"username": "jason",
"age": 18,
"gender": 1
}
}, {
"model": "app01.user",
"pk": 2,
"fields": {
"username": "tank",
"age": 24,
"gender": 3
}
}, {
"model": "app01.user",
"pk": 3,
"fields": {
"username": "egon",
"age": 73,
"gender": 2
}
}, {
"model": "app01.user",
"pk": 7,
"fields": {
"username": "kevin",
"age": 29,
"gender": 4
}
}]
sweetalert build page:
day 57 of realization! ! !
Custom Use finisher:
Custom pager . 1 bulk_create () Bulk insert data # for I in Range (1000): # models.Book.objects.create (title = '% s of the book' I%) # above in this manner is extremely inefficient l = [] for I in Range (10000 ): l.append (models.Book (title = ' % s of the book ' % I)) models.Book.objects.bulk_create (L) # bulk insert data custom finisher the use of back-end code book_list = models.Book.objects.all () current_page= request.GET.get("page",1) all_count = book_list.count() page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10,pager_count=5) page_queryset = book_list[page_obj.start:page_obj.end] 前端代码 {% for book in page_queryset %} <p>{{ book.title }}</p> {% endfor %} {{ page_obj.page_html|safe }}