五、Ajaxのデータ伝送、コンポーネントの順序、sweetalertページを構築、カスタムページャ

MTVとMVCモデル
Djangoフレームワークの請求は、MTVフレームワークすべき
モデル:M
T:テンプレート
V:ビュー

MVC
M:モデル
V:ビュー
C:コントローラコントローラ(URLの)
性質:MTVは、実際にはMVC






のAjax
非同期パーシャルリフレッシュ提出
リクエストメソッドがPOSTをGET
タグのhrefが要求GET属性
ブラウザウィンドウの入力URLのGETリクエスト
フォームフォームのGET / POSTの
AjaxのGET / POST

この技術はある最初のAjaxがでJS
効率化のため、ここではなく、JSネイティブ動作AJAX面倒
直接jQueryのパッケージ版を使用してAJAXの



最大の利点は、ページ全体をリロードせずにAJAXでは、ページのコンテンツのサーバと更新パーツとデータを交換することができます。
(この機能は、ユーザの要求と応答の処理が完了したと知らずに感じている


CONTENTTYPE送信データ符号化形式のフロントエンドの
データ符号化フォーマットの転送前後の
1.urlencoded
2.formdata
3.jsonの

形フォーム
デフォルトで使用された符号化形式は、URLエンコード
名前=&PWD = 123ジェイソン:データフォーマット
データおよび取得request.POSTにユーザに対してDjangoの後部解決自動的にURLエンコードエンコード形式を

FORMDATAを通過させるように修飾することができますファイル
として長いURLエンコードデータの符号化形式(名=ジェイソン&PWD = 123と一致しているとのためのDjangoのバックエンド ) を取得するために自動的に解析し、ユーザーのためrequest.POSTを置く
あなたは、コードを自動的に解析されている限り、ファイルを指定してFORMDATAを置けば中request.FILES
概要:フロントとデータの伝送の後端あなたのデータフォーマットとエンコーディングフォーマットは同じ家族が!!!嘘ことができないことを確認する必要があります

Ajaxのデータ提出
1.ajax・デフォルト・データはURLエンコード方法で提示された
フロント:
      。$( '#のB1')( 'クリック'、機能(){ON 
                       アラート(123)
                       //後端送信要求に向けたポストクリック
                       の$アヤックス({ 
                           URL: ''、//書いたコントロールに送信しますこれは、現在のアドレスに向けて送信された
                           'ポスト'は、//伝送方式は、ポストの要求である:タイプ
                           データ:{ 'I1':$ valの.. $( '#i2と'):( '#i1の')のval()、 'I2' ()} //データ送信
                           成功:機能(データ){//データの非同期パラメータの結果を受信するためには、送信
                               アラート(データ)
                               第3の描画操作DOMに入力することによって計算//後端結果鉱石
                               $( '#のI3')。ヴァル(データ)
                           } 

                       })

リア:
              インデックスDEF(要求): 
                     )(request.is_ajax IF:それは本当であれば要求はAJAXを送っていることを確認するために、#、そしてノートをtrueにある
                               印刷(123)
                               IF request.method == "POST":
                                   印刷(123)
                                   request.POST.get = D1( "D1")
                                   D2 = request.POST.get( "D2")
                                   RES = INT(D1)+ INT(D2)
                                   はHttpResponseを返す(RES)#AJAXバックにコールバックデータへ
                           復帰レンダリング(リクエスト、 "index.htmlを")
2.ajaxのデータ伝送フォーマットはJSON
ジャンゴJSONデータフォーマットの後端が自動的に解決やrequest.POST request.FILESを入れない
、それは無傷でJSON形式のデータを解析しませんがご要望に応じて。ボディ
のフロントエンド:
。( 'クリック' ON $( '#のB1')、機能(){
アラート(123)
//は後端ポストに向かって要求を送信するためのボタンをクリックして
$のアヤックス({
''、//コントロール:URL誰が現在のアドレスに書き込みをしていないに向けて提出された
タイプ:「ポスト」、//伝送方式は、ポストの要求である
データ:JSON.stringify({「ユーザ名」 :「ジェイソン」、「パスワード」:123})、// 送信しますデータ
のcontentType:「アプリケーション/ JSON」、 // バックエンドのデータはJSON形式であなたを教えて

成功:関数(データ){// dataパラメータが送信非同期結果を受信します
アラート(データ)
//第3の入力DOM鉱石にレンダリング動作によって計算後端結果
$( '#1 I3')ヴァル(データ)。
}
})
{)
リア:DEF指数(要求):
request.method == IF "POST":
(request.POSTの)印刷
送信フォーマットJSON辞書バイナリのフロントエンドを介して取得した#プリント(request.body)
json_str = request.body.decode( "UTF8") #デコードバイナリ
S = JSON .loads(json_str)#デシリアライゼーションのJSON文字列の
印刷(s.get( "ユーザ名") )#の
HttpResponseのリターン(「OK」)
を返すレンダリング(リクエスト、「index.htmlを」)

3.ajax転送ファイル
// AJAXファイル転送
フロントエンド:
  。( 'クリック'、機能(){ON $( '#のD4')
                       (=いるFormData新しい新しいFORMDATA VAR); //は、いずれかの通常のキーと値のペアは、ファイル転送することも渡すことができます
                       formData.append( 'ユーザ名'、「ジェイソン「); 
                       formData.append(」PSW「」123「); 
                       // 1.最初のファイルを検索jQery入力タグを使用するために、格納されている
                       // 2 jQeryオブジェクトは、ネイティブオブジェクトのJSに転送される
                       ネイティブ使用して3つのJSオブジェクト@ 。アプローチ.files [0]内の取得したファイルオブジェクトタグ保存
                       formData.append( 'MY_FILE'、$( '#のD5を')[0] .files [0]); // ファイルのラベルに保存されたファイルを取得オブジェクト

                       の$アヤックス({ 
                           URL:「」、//書き込みませんユーザーを制御するために置くがデフォルト現在提出され
                           たタイプの「POST」、
                           データ:FORMDATA、//転送データがFORMDATAです
                           // Ajaxは、ファイルを送信するために、あなたは、2つの追加のパラメータを指定する必要があります
                           PROCESSDATA:偽は、//前処理データ教えていない
                           のcontentTypeを:偽、//任意のエンコードを使用しない、リアDjangoは自動的に識別することができ、独自のコーディングをFORMDATA 
                           成功:機能(データを){//コールバック関数、データ伝送非同期パラメータの結果を受信するためのバックエンドに戻り、データを送信
                               アラート(データ)
                               。$(「#1 D3」)のVal(データ)
                               } 
                           })
                       

リア:
バックエンドにAjaxの転送ファイル
                           IF == request.method POSTは印刷(request.FILES)は、辞書ファイルを取得 
                               オープン(と今日の内容WB :F AS)     ファイルに書き込む
                                   ためにラインを request.FILES.get(" MY_FILE " ):
                                       f.write(ライン)
                               印刷(request.POST)   通常のデータ配信取得
                               印刷(request.POST.get(" ユーザ名を"))   は、通常のデータを搬送ゲット
                               返す(はHttpResponseを" OK " 

                           を返す(レンダリングリクエスト、" index.htmlを

 

おすすめ

転載: www.cnblogs.com/wukai66/p/11575457.html