django ajaxリクエストの処理

説明:post,put,deleteリクエストのみを処理し、getリクエストは本明細書で説明しない
コード#コード#
フロントエンド送信jsオブジェクト

// jquery   content-type  application/x-www-form-urlencoded，           POST      ，            ，     content-type  application/json，      application/x-www-form-urlencoded      POST    
<input type="text" name="name" id="name">
$.ajax({
        type: 'post',
        url: '/withtag_ajax/',
        data: {name: $("#name").val()},  // data   js  
        success: function (data) {
            $('#info').text(data.msg)
        }
    }
)

バックエンドコード

def withtag_ajax(request):
    print(request.POST)  #   
    return JsonResponse({'code': 1})

この方式はdjangoのrequestを直接用いる.POSTで処理可能
フロントエンド送信json文字列

<input type="text" name="name" id="name">
$.ajax({
        type: 'post',
        url: '/withtag_ajax/',
        data: JSON.stringify({name: $("#name").val()}),  //    json   
        contentType: "application/json",  //             json   
        success: function (data) {
            $('#info').text(data.msg)
        }
    }
)

バックエンドコード

def withtag_ajax(request):
    # json.loads  ：    JSON   `str`，`bytes` `bytearray`        Python  。
    ret = json.loads(request.body)
    print(ret)  #  {'name': 'django'}     
    return JsonResponse({'code': 1, 'msg': 'success'})

フロントエンドがjson文字列の送信を指定した場合、バックエンドはそのまま受信すればよい.
注意:フロントエンドが送信dataがjson文字列であり、contentTypeがapplication/jsonであることを指定していない場合、すなわちそのデフォルト値application/x-www-form-urlencodedを使用すると、バックエンドは処理できません.request.body.decode('utf-8')でもrequest.POSTでも受信されたものはです.デフォルト値を使用すると、jsオブジェクトを直接送信できます.
フロントエンド送信ファイルとformフォームデータ

<form id="myform">
       ：<input type="text" name="name" id="name">
    <input type="file" id="file">
    <a id="submit">  a>
form>

//  jquery     form     
$.prototype.serializeObject = function () {
    var obj = new Object();
    $.each(this.serializeArray(), function (index, param) {
        if (!(param.name in obj)) {
            obj[param.name] = param.value;
        }
    });
    return obj;
};

$("#submit").click(function () {
    var formdata = new FormData();
    formdata.append('aaa', $('#file')[0].files[0]);  //     
    formdata.append('data', JSON.stringify($("#myform").serializeObject()));  // form    
    console.log(JSON.stringify($("#myform").serializeObject()))
    console.log($("#myform").serializeObject())
    $.ajax({
            type: 'post',
            url: '/withtag_ajax/',
            data: formdata,
            processData: false,  // tell jquery not to process the data，  
            contentType: false, // tell jquery not to set contentType，  
            success: function (data) {
                $('#info').text(data.msg)
            }
        }
    )
})

バックエンドコード

def withtag_ajax(request):
    print(request.POST)  # 
    data = request.POST.get('data')  # json   ，    json.loads()       
    print(request.FILES.get('aaa'))  #     ，           
    return JsonResponse({'code': 1, 'msg': 'success'})

リクエスト方式がput,deleteの場合,json文字列を渡す

<input type="text" name="name" id="name">
$.ajax({
        type: 'put',
        url: '/withtag_ajax/',
        data: JSON.stringify({name: $("#name").val()}),  //    json   
        contentType: "application/json",  //             json   
        success: function (data) {
            $('#info').text(data.msg)
        }
    }
)

バックエンドコード

def withtag_ajax(request):
    print(request.body)  # b'{"name":"django"}'
    print(json.loads(request.body))  # {'name': 'django'}
    return JsonResponse({'code': 1, 'msg': 'success'})

リクエスト方式がput,deleteの場合jsオブジェクトを渡す

$.ajax({
        type: 'put',
        url: '/withtag_ajax/',
        data: $("#myform").serializeObject(),
        success: function (data) {
            $('#info').text(data.msg)
        }
    }
)

バックエンドコード

def withtag_ajax(request):
    print(request.body)  # b'name=django'
    print(QueryDict(request.body.decode('utf-8')))  # 
    return JsonResponse({'code': 1, 'msg': 'success'})

以上より、postリクエストである場合、フロントエンドがjsオブジェクトであるかjson文字列であるかに応じて、バックエンドが異なる方法で受信することができる.putリクエストの場合、フロントエンドにjson文字列が渡される場合、処理方法はpostと同じで、jsオブジェクトが渡される場合、手動でQueryDictオブジェクトに変換する必要があります
以上の場合、バックエンドコードはそれぞれrequest.bodyとrequest.POSTでデータを取得し、request.META["CONTENT_TYPE"]で判別することができ、application/jsonであればrequest.bodyで、application/x-www-form-urlencodedであればrequest.POSTで、バックエンドをより丈夫にすることができる.
ajax共通パラメータの説明:
async
タイプ:Boolean
デフォルト:true.デフォルトでは、すべてのリクエストは非同期リクエストです.同期リクエストを送信する必要がある場合は、このオプションをfalseに設定します.
同期要求はブラウザにロックされ、ユーザーの他の操作は要求が完了するまで待たなければならないことに注意してください.
beforeSend(XHR)
タイプ:Function
リクエストを送信する前に、カスタムHTTPヘッダを追加するなど、XMLHttpRequestオブジェクトの関数を変更できます.
XMLHttpRequestオブジェクトは一意のパラメータです.
これはAjaxイベントです.falseを返すと、今回のajaxリクエストをキャンセルできます.
data
タイプ:String
サーバに送信されるデータ.要求文字列フォーマットに自動的に変換されます.GETリクエストはURLの後に添付されます.プロセスデータオプションの説明を表示して、この自動変換を禁止します.Key/Value形式でなければなりません.配列の場合、jQueryは自動的に異なる値に同じ名前に対応します.{foo:["bar 1","bar 2"]}のように'&foo=bar 1&foo=bar 2'に変換されます.
dataType
タイプ:String
サーバが返すデータ型を期待します.指定しない場合、jQueryはHTTPパケットMIME情報に基づいて自動的に知能的に判断し、例えばXML MIMEタイプはXMLと識別される.1.4でJSONはJavaScriptオブジェクトを生成し、scriptはこのスクリプトを実行します.その後、サーバ側から返されたデータは、この値に基づいて解析され、コールバック関数に渡されます.使用可能な値:

"xml":    XML   ，   jQuery   。
"html":       HTML   ；    script        dom    。
"script":       JavaScript   。        。      "cache"   。  ：      (       )，   POST        GET   。（      DOM   script     ）
"json":    JSON    。
"jsonp": JSONP   。   JSONP        ，  "myurl?callback=?" jQuery       ?        ，       。
"text":         

contentType
タイプ:String
デフォルト:アプリケーション/x-www-form-urlencoded.サーバにメッセージを送信するときのコンテンツ符号化タイプ.
既定値はほとんどの場合に適しています.もしあなたがcontent-typeを$に明確に伝えたら.ajax()は、データがなくてもサーバに必ず送信されます.
success
タイプ:Function
要求に成功したコールバック関数.
パラメータ:サーバから返され、dataTypeパラメータに従って処理されたデータ;ステータスを記述する文字列.
これはAjaxイベントです.
type
タイプ:String
既定値:GET).要求方式(「POST」または「GET」)は、デフォルトでは「GET」である.注意:PUTやDELETEなどの他のHTTPリクエストメソッドも使用できますが、一部のブラウザでのみサポートされています.
url
タイプ:String
デフォルト:現在のページアドレス.要求されたアドレスを送信します.
error
タイプ:Function
デフォルト:自動判断(xmlまたはhtml).リクエストが失敗した場合にこの関数が呼び出されます.
XMLHttpRequestオブジェクト、エラー情報、オプションで取得された例外オブジェクトの3つのパラメータがあります.
エラーが発生した場合、エラー情報(2番目のパラメータ)はnullのほかに「timeout」、「error」、「notmodified」、「parsererror」になる可能性があります.
これはAjaxイベントです.
詳細については、以下を参照してください.http://www.w3school.com.cn/jquery/ajax_ajax.asp