フィールドのAjax sweetalertに関連してAJAXシリアライゼーションコンポーネントを使用してフォーマットの選択、MTVフィールドとMVC、AJAX、フロント及びデータの後端、ファイル転送、符号化、ページャ

選択肢フィールド

 

 

 

 

値:

 

 

 

 

MTV MVC モデル

MTV

ジャンゴなるためのフレームワークの請求MTVのフレームワーク

M:モデル

T:テンプレート

V:ビュー

 

MVC

M:モデル

V:ビュー

C:コントローラコントローラ(URLの)

自然:MTV 実際にMVC

 

 

 

 

アヤックス

特長:非同期提出  パーシャルリフレッシュを

リクエストメソッド        のGET、POST

タグのhref 属性      のGET リクエスト

ブラウザのウィンドウには、入力した URLのGETのリクエストを

フォームフォームの         GET / POST

AjaxのGET / POST

 

要約:

まず、AJAX 、この技術は、jsの

しかし、ネイティブの JS 操作するAJAX より複雑で私たちは効率を向上させるためにここにいます

直接 jQueryのカプセル化バージョンアヤックス

 AJAX 最大の利点は、ページ全体をリロードせずに、ページのコンテンツのサーバーやアップデートパーツとデータを交換することができます。

(この機能は、ユーザーの要求と応答プロセスへの気持ちが無意識のうちに終了しています)

 

小演習

3ページがあります入力ボックスには、

二つの第一の入力、入力されたデジタルボックスの

ボタンをクリックして 送信 AJAX ページを更新せずに要求の場合を

3番目のボックスには、自動的に2つの数の合計を算出し、

 コアコード:

$( '#のB1')。( 'クリック'、機能上の(){

{#alert(123)#}

// 後端に向かって送信するボタンをクリックして、ポスト要求

$アヤックス({

URL:「」、// 書き込みませんコントロールが現在のアドレスを提出することを北朝鮮に送られ、

タイプ:「ポスト」、// 伝送方式があるポスト要求

データ:{ 'I1':$ ( '#1 I1')のval()、 'I2':.. $( '#1 I2')のval()} // データ送信

成功:関数(データ){//データに出願非同期の結果を受信するためのパラメータ

{#alert(データ)#}

// 計算結果の後端DOMの第三の描画操作入力ボックス

$( '#i3は')。valを(データ)

}

})

})

 

Ajaxの基本的な使い方

 

 

 

 

小さな例:

 

 

 

 

 

 

 

前部および後部は、送信データの符号化フォーマットを終了します。

 CONTENTTYPE 送信データの符号化形式のフロントエンドを

前部および後部は、送信データの符号化フォーマットを終了します

1.urlencoded

へ2.formdat

3.json

 

フォームフォーム

使用して、デフォルトのエンコード形式 URLエンコードを

データフォーマット:名=ジェイソン&PWD = 123

Djangoのための後端部をURLエンコード自動的に解析されたデータ符号化フォーマットおよび配置request.POSTを取得するユーザーのために

 

それはのように変形することができる FORMDATA ファイル転送

ジャンゴ限り一貫性があるようにするための後端URLエンコードデータの符号化形式(名=ジェイソン&PWD = 123 ) を自動的に解析し、配置request.POSTのために取得したユーザは

ファイルが場合 限り、あなたはエンコーディングを指定するようです FORMDATAは自動的に解析して入れますrequest.FILESを

概要フロントとデータの伝送の後端があなたのデータフォーマットとエンコーディング形式が同じであることを確認する必要があります(などのenctype デフォルトはURLエンコードし、ファイルをアップロードし、それを置くrequest.postをして)

AJAXは、データ伝送フォーマットを変更し:

 

Ajaxのデータを提出

Ajaxのデフォルトのデータ提出がされてURLエンコード

 

AJAX 送信のJSON 形式のデータ

DjangoのためのバックエンドのJSON データ形式を自動的に解析されていませんrequest.POST Huozhe request.FILES 内部

これは、解析されないのJSON 形式のデータをしかし上、それはそのままrequest.body

$( '#のB1')。( 'クリック'、機能上の(){

警告(123)

// 後端に向かって送信するボタンをクリックして、ポスト要求

$アヤックス({

URL:「」、// 書き込みませんコントロールが現在のアドレスを提出することを北朝鮮に送られ、

タイプ:「ポスト」、// 伝送方式があるポスト要求

データ:JSON.stringify({ 'ユーザ名' 'ジェイソン'、 'パスワード':123})// 送信されたデータ

contentTypeの:「アプリケーション/ JSON」、 // バックエンドのデータがあなたを教えてJSON フォーマット

 

成功:関数(データ){//データに出願非同期の結果を受信するためのパラメータ

警告(データ)

// 計算結果の後端DOMの第三の描画操作入力ボックス

$( '#i3は')。valを(データ)

}

 

})

// {)

Ajaxの転送ファイル

 // Ajaxのファイルを転送

$( '#のB1')。( 'クリック'、機能上の(){

// AJAX 転送ファイルは、ビルトインオブジェクトを使用することをお勧めしますFORMDATA

VAR FORMDATA =新しいいるFormData(); //は、 共通鍵に送信することができるファイル転送することができ

// 通常のキーを追加します

formData.append( 'ユーザ名'、 'ジェイソン');

formData.append( 'パスワード'、 '123');

// ファイルを転送

// ラベルファイルオブジェクトに格納された文書を入手する方法?   修正された文法

// 1 で最初jQery 保存されたファイル検索入力ラベル

// 2. jQueryのネイティブへのオブジェクトのjs オブジェクト

// 3. ネイティブの使用JS オブジェクトメソッド.files [0] 内部ストレージラベルファイルオブジェクトで取得されます

// 4. 両方の引数がある必ず指定してください

formData.append( 'MY_FILE'、$( '#さd1')[0] .files [0]);

$アヤックス({

URL:「」、// 書き込みませんコントロールが現在のアドレスを提出することを北朝鮮に送られ、

タイプ:「ポスト」、// 伝送方式があるポスト要求

FORMDATA、//:データデータが送信されます

 

// Ajaxは、ファイルを送信するために、あなたは、2つの追加のパラメータを指定する必要があります

PROCESSDATA:偽、// データを処理しないように、フロントに伝えます

contentType:偽、// ので、任意のコーディングを適用しないFORMDATA コード化された携帯オブジェクト自体ジャンゴ後端が認識できるFORMDATA オブジェクトは、

 

成功:関数(データ){//データに出願非同期の結果を受信するためのパラメータ

{#alert(データ)#}

// 計算結果の後端DOMの第三の描画操作入力ボックス

$( '#i3は')。valを(データ)

}

 

})

})

 

 

 

 

シリアル化コンポーネント:

#1 Djangoはdjango.core輸入シリアライザから小さなツール・シーケンスが付属しています

デフREG(リクエスト):

user_list = models.User.objects.all()

RES = serializers.serialize( 'JSON'、user_list)

リターンは(要求、 'index.htmlを'、地元の人々を())レンダリング

RES:

[{

"モデル": "app01.user"、

"PK":1、

"フィールド":{

「ユーザー名」:「ジェイソン」、

"年齢":18、

"性別":1

}

}、{

"モデル": "app01.user"、

"PK":2、

"フィールド":{

「ユーザー名」:「タンク」、

"年齢":24、

"性別":3

}

}、{

"モデル": "app01.user"、

"PK":3、

"フィールド":{

「ユーザー名」:「エゴン」、

"年齢":73、

"性別":2

}

}、{

"モデル": "app01.user"、

"PK":7、

"フィールド":{

「ユーザー名」:「ケビン」、

"年齢":29、

"性別":4

}

}]

 ページを作成sweetalert:

実現の57日!

カスタムフィニッシャー使用します。

カスタムページャ
        。1 bulk_create()一括挿入データ
             範囲内Iのための(1000):
            #1      models.Book.objects.create(タイトル= I% 'ブックの%s'は)
            このように上記のは非常に非効率的である
            
            L = []
             のための I におけるレンジ(10000 ):
                l.append(models.Book(タイトル = ' %sの著書の'%のI))
            models.Book.objects.bulk_create(L)  一括挿入データ
    
    
    カスタムフィニッシャー使用
        バックエンドコード
                book_list = models.Book.objects.all()
                CURRENT_PAGE= request.GET.get(" ページ"、1 
                all_count = book_list.count()
                page_obj =改ページ(CURRENT_PAGE = CURRENT_PAGE、all_count = all_count、per_page_num = 10、pager_count = 5 
                page_queryset = book_list [page_obj.start:page_obj。エンド】
        前端代码
                {ブックにおける page_querysetの%}
                 <P> {{book.title}} </ P> 
                {%ENDFOR%} 
                {{page_obj.page_html |安全}}
ページャ

 

おすすめ

転載: www.cnblogs.com/yangjiaoshou/p/11575316.html