ディレクトリ

ジャンゴ（七）--- AJAX

ジャンゴ（七）--- AJAX

AJAXの概要

中国語に翻訳AJAX（非同期JavaScriptとXML）は、「非同期JavaScriptとXML」です

サーバーではJavaScript言語を使用して、非同期相互作用、XMLへのデータの送信

AJAX最大の特徴である、あなたができるページ全体をリロードしない場合には、サーバとデータを交換することができ、およびページコンテンツの更新部分

AJAXは、任意のブラウザプラグインが必要ですが、ユーザーがお使いのブラウザでJavaScriptを実行する必要があることはできません。

同期相互作用は：クライアントが第2の要求を発行するために、終了を待つために適切なサーバーに要求を送信します

非同期相互作用は：クライアントがサーバーの応答の終了を待たずに、要求を行った後、第2の要求を発行することができます

基本的な文法構造アヤックス

is_ajax（）現在のリクエストがAJAXリクエストが、それはブール値を返しているか否かを判定する

AJAXを使用した後、のHttpResponseないページ上のアクションではなく、AJAXと直接対話を行います

$('#d4').on('click',function () {
    $.ajax({
        url:'',  // 数据提交的后端地址  不写就是往当前页面提交  也可以写后缀 也可以写全称  跟actions一样
        type:'post',  // 提交方式  默认是get请求
        data:{'i1':$('#d1').val(),'i2':$('#d2').val()},  // 提交的数据
        success:function (data) {  // 形参data就是异步提交之后后端返回结果
            $('#d3').val(data)  // 回调机制需要做的事情
        }
    })
})

前端と後端送信データ符号化フォーマット

ない別のデータバックエンド処理のために、前端と後端との間の形式の対話をコードデータ

例えば：request.POST request.FILESとの両方がユーザによって送信されたデータを得るために使用されます

（接尾辞）をコードします：

1. urlencoded
2. formdata(enctype)
3. application/json格式数据

バックエンドのデータ送信方法：

1. a标签通过href携带参数            get请求
2. form表单                            get/post
3. ajax                                     get/post

符号化されたフォームのフォーム・データ・フォーマットを送信します

単一のデフォルトエンコーディングの目標のためにURLエンコード

対応するデータ形式をURLエンコード：

ユーザ名=シンプル＆パスワード= 123

URLエンコードDjangoのバックエンドデータの場合、および自動的にカプセル化されたrequest.POSTを解決
1. ファイル形式のフォームを送信する場合、フォーマットをコードするコンテンツの種類である：マルチパート/フォームデータ。
データ形式が満たされるようジャンゴバックエンドは自動的にrequest.POSTを解決するために、長いURLエンコード

それはファイルオブジェクトである場合には、ジャンゴバックエンドが自動的に識別し、request.FILESに置かれます
1. 送信したい場合、フォームのフォームはAJAXによって、データJSON形式を送信することはできません。

エンコードされたデータフォーマットAJAXを送信します

Ajaxの3つのフォーマットの伝送可能

1. urlencoded
2. formdata
3. application/json格式数据

アヤックスのcontentTypeすることにより、パラメータ、符号化フォーマットを変更します。

データ形式のJSONに変換

contenType:'application/json

コンテンツタイプ：アプリケーション/ x-www-form-urlencodedで。文字セット= UTF-8

AJAXデフォルトコードフォーマットがURLエンコードされ、リアDjangoはまた、request.POSTにデータを解析します

注意：

それはインタラクティブなデータ、フォーマットやデータの符号化フォーマットに来るとき前端と後端には一致している必要があります

データ転送フォーマットのAjaxのJSON

后端              前段
dumps           stringify
loads           parse

JSON AJAXによって伝送フォーマットデータ、データ

コンテンツタイプ：アプリケーション/ JSON

$('#d1').click(function () {
$.ajax({
    url:'',
    type:'post',
    contentType:'application/json',  # 1.注意点1
    data:JSON.stringify({'username':'jason','password':'123'}),  # 2.注意点2
    success:function (data) {
        alert(123)
    }
})

データ処理の上に前後の伝送のためのDjango JSONはしないだろう

Request.bodyは、JSON（バイナリデータ）に直接置か

Ajaxのデータ転送ファイル

新組み込みオブジェクトによって、
データファイルも共通キーと値のペアをサポート運ぶことができるオブジェクト

$('#d1').click(function () {
       // 先生成一个内置对象
       var MyFormData = new FormData();
       // 1. 先添加普通的键值
       MyFormData.append('username','jason');  // 添加了一组普通的简直对
       MyFormData.append('password','123');
       // 2. 添加文件数据
       MyFormData.append('myfile',$('#d2')[0].files[0]);  // 如何获取input框中文件对象$('#d1')[0].files[0]
   $.ajax({
       url:'',
       type:'post',
       data:MyFormData,  # 1

       // 发送文件必须要指定的两个参数
       contentType:false,  // 不适用任何编码  MyFormData对象内部自带编码 django后端能够识别  #2
       processData:false,  // 不要处理数据  # 3
       success:function (data) {
       }
   })
})

連載

分離を達成するための便宜、前端と後端の端前後一つの大きな辞書、インタラクティブデータにシリアル化データの統合

from app01 import models
from django.core import serializers
# 序列化目的  将数据整合成一个大字典形式 方便数据的交互
def zzz(request):
    user_queryset = models.User.objects.all()
    # [{username:...,password:...,hobby:...,},{},{},{}]
    # user_list = []
    # for data in user_queryset:
    #     user_list.append(
    #         {'username':data.username,
    #          'password':data.password,
    #          'gender':data.get_gender_display(),
    #
    #          }
    #     )
    res = serializers.serialize('json',user_queryset)
    return HttpResponse(res)