DjangoのAjaxに追加操作
28014 ワード
---コンテンツの復元開始---
choiceパラメータ
このパラメータは、データベースに数字を格納して取り出すときに、対応する文字に変換することができます.なぜなら、数字の格納に占める空間が文字よりはるかに小さいため、リソースを節約することができます.
使用方法:
MTVとMVCモデル
この二つは概念です
MTV:M:modelsモデル層、T:templateテンプレート層、V:viewsビュー層
MVC:M:modelsモデル層、V:viewsビュー層、C:controller制御層、url層
本質:MVCも本質的にMTVモデル
AJAX:
AJAX(Asynchronous Javascript And XML)を中国語に訳すと「非同期JavascriptとXML」になります.すなわち,Javascript言語を用いてサーバと非同期でインタラクションを行い,転送されたデータはXMLである(もちろん,転送されたデータはXMLだけではない).
AJAXは新しいプログラミング言語ではなく、既存の標準を使った新しい方法です.
特徴:非同期コミット、ローカルリフレッシュ.
javascriptに由来します.
最大の利点は、ページ全体をリフレッシュせずに、前後のデータのインタラクションを完了することです.
(この点はユーザーに知らないうちに完成したような感じがします)
その書き方も固定的です.
次の例を示します.
contentType前後端転送データの符号化フォーマット
urlencoded
formdata
json
formフォームのデフォルトの符号化フォーマットはurlencodedで、フロントエンドのフォーマットは何=何が複数で&で区切られ、バックエンドではrequestが自動的に解析されます.POST中
formdata:django競合urlencoded符号化フォーマットのデータはrequestに格納されます.POSTではファイルが自動的に解析するrequestに格納される.Filesでは、すなわち、formdataは、トランスキー対の値をサポートするとともに、トランスファイル、バックエンド取得、キー対の値、POSTをサポートするが、文はFilesである.
注意点:前後の端でデータを転送して、データはどんなフォーマットで送信して、どんなフォーマットで受信して、つまりデータのフォーマットは符号化のフォーマットと等しくなければなりません
ajaxはjson形式のデータを送信する
djangoのバックエンドは、json形式のデータに対して、自動的に解析するPOSTやFilesに入れるのではなく、そのままrequestに入れる.bodyでは、中はすべてバイナリ文字列で、私たち自身の復号と逆シーケンス化が必要です.
バックエンド取得
AJAX転送ファイル
ajax転送はFormDataという内蔵オブジェクトを利用する
コンポーネントのシーケンス化
これはdjangoが持参した小さなコンポーネント(serializers)を用いた.
次の操作を行います.
sweetalert
Bootstrap-sweetalertプロジェクトのダウンロードをクリックします.
一括アクション(bulk_create)
シーンが1000個のデータ、つまり複数のデータを挿入する場合、このときbulk_を使います.义齿
ページングマシン
使用シヨウ:バックエンドコード:
フロントエンドコード
転載先:https://www.cnblogs.com/xinfan1/p/11574275.html
choiceパラメータ
このパラメータは、データベースに数字を格納して取り出すときに、対応する文字に変換することができます.なぜなら、数字の格納に占める空間が文字よりはるかに小さいため、リソースを節約することができます.
使用方法:
class User(models.Model):
username = models.CharField(max_length=32)
age = models.IntegerField()
choices = (
(1,' '),(2,' '),(3,' ')
)
gender = models.IntegerField(choices=choices)
"""
1 choice
print(user_obj.get_gender_display())
choices
get_choices _display()
2
"""MTVとMVCモデル
この二つは概念です
MTV:M:modelsモデル層、T:templateテンプレート層、V:viewsビュー層
MVC:M:modelsモデル層、V:viewsビュー層、C:controller制御層、url層
本質:MVCも本質的にMTVモデル
AJAX:
AJAX(Asynchronous Javascript And XML)を中国語に訳すと「非同期JavascriptとXML」になります.すなわち,Javascript言語を用いてサーバと非同期でインタラクションを行い,転送されたデータはXMLである(もちろん,転送されたデータはXMLだけではない).
AJAXは新しいプログラミング言語ではなく、既存の標準を使った新しい方法です.
特徴:非同期コミット、ローカルリフレッシュ.
javascriptに由来します.
最大の利点は、ページ全体をリフレッシュせずに、前後のデータのインタラクションを完了することです.
(この点はユーザーに知らないうちに完成したような感じがします)
その書き方も固定的です.
次の例を示します.
input
input
ajax
$('#b1').on('click',function () {
{#alert(123)#}
// post
，$.ajax
$.ajax({
url:'', // ， form action ， ， ，
type:'post', //
data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, //
success:function (data) { // data
{#alert(data)#}
// DOM input
$('#i3').val(data)
}
})
}) contentType前後端転送データの符号化フォーマット
urlencoded
formdata
json
formフォームのデフォルトの符号化フォーマットはurlencodedで、フロントエンドのフォーマットは何=何が複数で&で区切られ、バックエンドではrequestが自動的に解析されます.POST中
formdata:django競合urlencoded符号化フォーマットのデータはrequestに格納されます.POSTではファイルが自動的に解析するrequestに格納される.Filesでは、すなわち、formdataは、トランスキー対の値をサポートするとともに、トランスファイル、バックエンド取得、キー対の値、POSTをサポートするが、文はFilesである.
注意点:前後の端でデータを転送して、データはどんなフォーマットで送信して、どんなフォーマットで受信して、つまりデータのフォーマットは符号化のフォーマットと等しくなければなりません
ajaxはjson形式のデータを送信する
djangoのバックエンドは、json形式のデータに対して、自動的に解析するPOSTやFilesに入れるのではなく、そのままrequestに入れる.bodyでは、中はすべてバイナリ文字列で、私たち自身の復号と逆シーケンス化が必要です.
$('#b1').on('click',function () {
alert(123)
// post
$.ajax({
url:'', //
type:'post', // post
data:JSON.stringify({'username':'jason','password':123}),
//
contentType:'application/json', // json
success:function (data) { // data
}
})$('#b1').on('click',function () {
alert(123)
// post
$.ajax({
url:'', //
type:'post', // post
data:JSON.stringify({'username':'jason','password':123}),
//
contentType:'application/json', // json
success:function (data) { // data
}
})バックエンド取得
def index(request):
# print(request.POST)
# print(request.FILES)
if request.method == 'POST':
print(request.POST)
print(request.FILES)
# print(request.body)
# import json
# data = request.body
# res1 = data.decode('utf-8')
# print(res1, type(res1))
# res2 = str(data,encoding='utf-8')
# print(res2,type(res2))
# res3 = json.loads(res2)
# print(res3,type(res3))AJAX転送ファイル
ajax転送はFormDataという内蔵オブジェクトを利用する
// ajax formdata
$('#b1').on('click',function () {
var formData = new FormData(); //
//
formData.append('username','jason');
formData.append('password','123');
//
// ?
// 1. jQ ery input
// 2. jQuery js
// 3. js .files[0]
// 4. false
formData.append('my_file',$('#d1')[0].files[0]);
$.ajax({
url:'', //
type:'post', // post
data:formData, //
// ajax
processData:false, //
contentType:false, // formdata django formdata
success:function (data) { // data
{#alert(data)#}
// DOM input
$('#i3').val(data)
}
})
})コンポーネントのシーケンス化
これはdjangoが持参した小さなコンポーネント(serializers)を用いた.
次の操作を行います.
from django.core import serializers
def reg(request):
user_List = models.User.object.all()//
res = serializers.serializer('json',user_List) ，
return render(request,'index.html,locals())sweetalert
Bootstrap-sweetalertプロジェクトのダウンロードをクリックします.
$("#b55").click(function () {
swal({
title: " ？",
text: " ！",
type: "warning",
showCancelButton: true, //
confirmButtonClass: "btn-danger", //
confirmButtonText: " ", //
cancelButtonText: " ", //
closeOnConfirm: false, //
showLoaderOnConfirm: true //
},
function () {
var deleteId = 2;
$.ajax({
url: "/delete_book/",
type: "post",
data: {"id": deleteId},
success: function (data) {
if (data.code === 0) {
swal(" !", " ！", "success");
} else {
swal(" ", " ！", "error")
}
}
})
});
})一括アクション(bulk_create)
シーンが1000個のデータ、つまり複数のデータを挿入する場合、このときbulk_を使います.义齿
def reg(request):
:
for i in range(1000):
models.Book.objects.create(name=i)
for
ls = []
for i in range(1000）:
ls.append(models.Book(name=i))// ，
models.Book.objects.bulk_create(ls)
bulk_createページングマシン
class Pagination(object):
def __init__(self,current_page,all_count,per_page_num=2,pager_count=11):
"""
:param current_page:
:param all_count:
:param per_page_num:
:param pager_count:
:
queryset = model.objects.all()
page_obj = Pagination(current_page,all_count)
page_data = queryset[page_obj.start:page_obj.end]
page_data queryset
page_obj.page_html
"""
try:
current_page = int(current_page)
except Exception as e:
current_page = 1
if current_page <1:
current_page = 1
self.current_page = current_page
self.all_count = all_count
self.per_page_num = per_page_num
#
all_pager, tmp = divmod(all_count, per_page_num)
if tmp:
all_pager += 1
self.all_pager = all_pager
self.pager_count = pager_count
self.pager_count_half = int((pager_count - 1) / 2)
@property
def start(self):
return (self.current_page - 1) * self.per_page_num
@property
def end(self):
return self.current_page * self.per_page_num
def page_html(self):
# < 11 ：
if self.all_pager <= self.pager_count:
pager_start = 1
pager_end = self.all_pager + 1
# > 11
else:
# <= 11/2
if self.current_page <= self.pager_count_half:
pager_start = 1
pager_end = self.pager_count + 1
# 5
else:
#
if (self.current_page + self.pager_count_half) > self.all_pager:
pager_end = self.all_pager + 1
pager_start = self.all_pager - self.pager_count + 1
else:
pager_start = self.current_page - self.pager_count_half
pager_end = self.current_page + self.pager_count_half + 1
page_html_list = []
# nav ul
page_html_list.append('''
''')
first_page = 'トップページ ' % (1)
page_html_list.append(first_page)
if self.current_page <= 1:
prev_page = ' のページ '
else:
prev_page = ' のページ ' % (self.current_page - 1,)
page_html_list.append(prev_page)
for i in range(pager_start, pager_end):
if i == self.current_page:
temp = '%s ' % (i, i,)
else:
temp = '%s ' % (i, i,)
page_html_list.append(temp)
if self.current_page >= self.all_pager:
next_page = ' のページ '
else:
next_page = ' のページ ' % (self.current_page + 1,)
page_html_list.append(next_page)
last_page = ' ページ ' % (self.all_pager,)
page_html_list.append(last_page)
#
page_html_list.append('''
''')
return ''.join(page_html_list)使用シヨウ:バックエンドコード:
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 %}
{{ book.title }}
{% endfor %}
{{ page_obj.page_html|safe }}転載先:https://www.cnblogs.com/xinfan1/p/11574275.html