ジャンゴ毎日-AJAX

AJAXの概要

まず、AJAXは、ページ全体をリロードせず前提で、ページが技術的な部分を更新することができ、彼は新しいプログラミング言語ではありませんでしたが、既存の標準を使用する新しい方法は、ネイティブのJavaScript開発に基づいており、彼はすぐに動的なWebページを作成するために使用することができます。

AJAX最大の特徴は、パーシャルリフレッシュと非同期は、パーシャルリフレッシュを提出している非同期タスクがダウンして実行し続けることができ、まだタスクの戻り値を待っているの提出後に提出する必要はありませんが、名前が示すパーシャルリフレッシュは、ページ全体を更新せずに可能です戻り値を送信する前にタスクは、次に、コールバック関数によって受信され、効率が非常に高いです。

この記事では、AJAXの説明をJSから行うことではなく、AJAXとjQueryの使用と組み合わせビューの比較的単純なポイントから、AJAXを大幅にコード自体の量を簡素化することができ、そしてより多くの機能を実現するために、の例を介して動作させ特定の使用AJAXとjQueryの組み合わせ。

JQおよびAJAXの一例

タイトルは、以下：フロントページを書き込み、ページは、2つの入力、すなわちない直接によって、ページを更新することができない、注意、内側の第二の入力ボックスに結果を表示し、最初の入力ボックスした計算式をボックスました行うにはページを更新し、そして今、私たちは、この要件を完了するために、ステップバイステップで最初から何Djangoプロジェクト、リコールする割り当て方法

# 首先,创建一个Django项目,注意,目录名不要带中文,这里我们定义项目名为task,第一个应用名为app01
# 然后,在task/urls.py里面写入
# task/urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^', views.home),
]

ルーティングの後に書かれ、我々はviews.py writeメソッドの内部で行ってきました

# app01/views.py
def home(request):
    if request.is_ajax():# 这里判断请求类型是否是AJAX的类型
        if request.method == 'POST':# 判断请求method是否是POST
            t1 = request.POST.get('t1')# 两个判断都通过的话,取请求的t1的value值,t1是在前端home.html里面起的别名,第一个输入框的id为t1
            t1 = eval(t1)   # 去引号,因为从前端传过来的是字符串,不能做运算,去引号之后就会变成一个计算式,把计算式直接传给前端就可以计算
            return HttpResponse(t1)
    return render(request, 'home.html')

その後、私たちは、テンプレートはもちろん、私たちが最初に頭にしなければならない、home.htmlという名前の新しいHTMLファイルを作成するフォルダ行き<head>のjQueryにインポート

# templates/home.html
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"
</script>
</head>
<body>
计算式
<br>
<input type="text" id="t1">//这里定义一个输入框,用来输入计算式
<button id="b1">计算</button>//按钮,最简单的就是最实用的,我们可以给一个空白的按钮绑定很多我们需要的功能,这里id设为b1,方便下面AJAX调用

<br>
结果
<br>
<input type="text" id="t2">//定义第二个输入框,用来显示得到的结果

<script>//下面就是AJAX和jQuery的结合使用
    $('#b1').on('click', function () {//给按钮绑定一个点击事件,b1是上面定义的button的id
        $.ajax({    //下面就是AJAX需要的参数
            
            // 1.向后端地址发数据,不写默认就是朝当前地址提交
            url: '',
            
            // 2.发送的请求,常用的就是post或get
            type: 'post',
            
            // 3.发送数据的内容
            data: {'t1':$('#t1').val()},
                
            // 4.异步提交的任务 需要通过回调函数来处理,即success就是回调函数,用来接收从后端返回的数据,并做处理
            success: function (data) { //这里data就是后端发给前端的异步提交的返回结果
                {#alert(data);#}
                $('#t2').val(data) //这里给t2输入框赋值,t2是上面给第二个输入框定义的id
            }
        })
    })
</script>
</body>

上記の3つの文書が終了した後、プロジェクト全体の実装では、あなたは私たちがページと機能の友達が欲しいものを手に入れることができます。

AJAXとcontentType

コンテンツタイプ、メッセージ・タイプとして翻訳のcontentTypeが、ここではAJAXのパラメータの一つであり、その主な役割はバックエンド伝動装置のフロントエンドのフォーマットタイプのデータを伝えることです。

私たちは、データフォーム送信されたフォームは、URLエンコードデフォルトフォーマット、それこのタイプは、以下のことを特徴としているが何であるであることを知っています？：

username=hello&password=123&age=12これは、キーと値のペアの形で、これである、とする&私たちは、それらを接続、データのurlencoded形式であり、このデータは、request.POSTは内部詰めの結果を解析し、バックエンドのデータ・フォーマットをジャンゴますただrequest.POSTは、そこからあなたは私たちが望むすべての情報を得ることができます。

もちろん、私たちは知っている別のフォームのフォームのエンコード形式がありFORMDATA、定義された方法は次のとおりです。

<form action="" enctype="multipart/form-data"></form>彼はいつものデータを渡すことはできません別の場所に関してurlencoded形式は、また、ファイルを転送するために使用することができますが、違いがある、FORMDATAフォーマットタイプの解決後のためのDjangoのバックエンド、データのファイルタイプは入れません。内部request.POSTではなく、内側request.FILESに、私たちは、データに注意を払うように時間がかかります。

AJAXデフォルトのデータ型が、実際にフォーマットをURLエンコードされます。

AJAXは、JSON形式を渡します

ほとんどすべての言語は、JSON形式のデータ書き込み方法をドッキングされますが、それはクロスプラットフォーム、データ伝送のための基本的なJSON形式を選択します、そして、Djangoのバックエンド用であるため、我々はすべて知っているJSON形式は、特に優れたクロスプラットフォームのデータ形式でありますJSONデータ・フォーマットは、自動的に私たちがフロントに送られたマニュアルデータとして元のモデルを得ることができるように、我々はAJAXデータ形式を使用する方法、データの損失や歪みを恐れることなく、内側にそのままrequest.bodyます、解決しません？JSON形式になって、次のようにそれを送信します：

# home.html
<script>
    $('#b1').on('click',function () {
        $.ajax({
            url:'',  
            type:'post', 
            // 1. 告诉后端你当前的数据格式 到底是什么类型,因为我们要转换成json数据,所以就告诉后端我们发的就是json格式数据
            contentType:'application/json',
            // 2. 这里才是真正的把要传到后端的数据转成json格式,关键字为JSON.stringify({})
            data:JSON.stringify({'username':'jason','password':'123'}),

            success:function (data) {  
                alert(data)
            }
        })
    })
</script>

# 后端在处理json数据的时候,常用以下格式
# views.py
import json
def home(request):
     if request.method == 'POST':
        json_bytes = request.body   # 这里从request.body里面拿出json格式的数据
        json_str = str(json_bytes,encoding='utf-8')# 将json格式的数据转换成str字符串类型
        json_dict = json.loads(json_str)    # 对字符串的数据反序列化,得到真正的json的大字典
        print(json_dict,type(json_dict))
    return render(request,'index.html')

AJAXアップロードファイル

私たちは、必要に応じてファイルを転送するために、フォームのフォームを知っているmultipart/form-dataあなたはまた、次のようにファイルを転送することができ、あなたがファイルにAJAXを転送する必要がある場合は、非常によく似たものですので、フォーマットを、組み込みオブジェクトFORMDATAを使用する必要があり、これは組み込みオブジェクトは非常に強力ですが、あなたは普通のキーを渡すことができます私たちは、AJAXを作成する方法の一例をFORMDATAするコードを見てみましょう

# home.html

<input type="file" name="myfile" id="t3">
<script>
$('#b1').on('click',function(){
    //1. 生成一个FormData对象,方便后面操作
    var myFormData = new FormData();
    //2. 向生成的对象里面添加普通值
    myFormData.append($("#t1").val());
    //3. 向生成的对象里面添加文件,其实这里是三步,合并成了一步
        //(1).要先通过jQuery查找到该文件的标签
        //(2).然后把jQuery对象转换成js对象
        //(3).利用原生js对象的方法,直接取到文件的内容
    myFormData.append("myfile",$("#t3")[0].files[0]);
    $.ajax({
            url:'',
            type:'post',
            data:myFormData,  // 直接把前面定义的myFormData对象给data即可
            // ajax传文件的时候,一定要指定两个关键性的参数
            contentType:false,  // 不用任何编码,因为formdata对象自带编码
            processData:false,  // 告诉浏览器不要处理我的数据,直接发给后端就行
            success:function (data) {
                alert(data)
            }
        })
    
})
</script>