何がdevネットワークですか?
この簡単なチュートリアルでは、Ajaxを使用してリフレッシュページなしでdjangoフォームを投稿する方法を示します.
私は、あなたがすでにあなたのプロジェクトを作成したと仮定します.モデルで非常にシンプルなポストモデルを作り始めましょう.パイ

from django.db import models

class Post (models.Model):
    title = models.CharField(max_length=50)
    description = models.TextField()

    def __str__(self):
        return self.title

一度開いたビューを作成します.PyとInsert次のコード

from django.shortcuts import render
from django.http import JsonResponse
from .models import Post

def create_post(request):
    posts = Post.objects.all()
    response_data = {}

    if request.POST.get('action') == 'post':
        title = request.POST.get('title')
        description = request.POST.get('description')

        response_data['title'] = title
        response_data['description'] = description

        Post.objects.create(
            title = title,
            description = description,
            )
        return JsonResponse(response_data)

    return render(request, 'create_post.html', {'posts':posts})        

ご覧のように、JSONエンコードされたレスポンスを作成するのに役立つHttpResponseサブクラスです.デフォルトのコンテンツタイプヘッダーはアプリケーション/JSONに設定されます.最初のパラメータdataはdictインスタンスでなければなりません.我々はすぐに作成されたポストを表示するにはJSONデータを使用します.
私は非常に要求の間のより良い理解の違いを持ってStackOveroverflowの質問に従うことをお勧めします.POST []とリクエスト.ポスト.get ()

Sep 20
コメント: 1
回答:3

91

違いは何ですか

request.POST.get('sth')

and

request.POST['sth']

似たような質問はありませんが、どちらも私のために同じように働いています.任意のアイデア?
Open Full Question
あなたのページに複数のフォームがある場合は、アクションを使用してそれらを分離することができますので、あなたのビューは、同時に複数の要求を取得しません.
オブジェクトを単一の段階で作成して保存するには、create ()メソッドを使用します.
HTMLフォームを見てみましょう

<form method="POST" id="post-form">
  {% csrf_token %}
  <div class="form-group">
    <label>Title</label>
    <input type="text" class="form-control" id="title" placeholder="Title">
  </div>
   <div class="form-group">
     <label>Description</label>
     <textarea class="form-control" id="description" placeholder="Description"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
</form>

あなたが知っているように、我々はポストリクエストを作るためにCSRFRANトークンを使っています、そして、それはちょうど単純なブートストラップ・フォームです.idによってAjaxを使って値を得るために各入力にIDを与えます.

$(document).on('submit', '#post-form',function(e){
    $.ajax({
        type:'POST',
        url:'{% url "create" %}',
        data:{
            title:$('#title').val(),
            description:$('#description').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
        success:function(json){
            document.getElementById("post-form").reset();
            $(".posts").prepend('<div class="col-md-6">'+
                '<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">' +
                    '<div class="col p-4 d-flex flex-column position-static">' +
                        '<h3 class="mb-0">' + json.title + '</h3>' +
                        '<p class="mb-auto">' + json.description + '</p>' +
                    '</div>' +
                '</div>' +
            '</div>' 
            )
        },
        error : function(xhr,errmsg,err) {
        console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
    }
    });
});

jquery - 2.2.4を含める必要があります.あなたの静的ファイルにmin . jsは、私のgit repositoryからそれを取ることができます.
ああ!ここで何が起こっているのですか.最初に、フォームにIDプロパティを追加することが重要です.したがって、JQueryはフォームの送信を検出できます.Ajax Typeは、データベースにデータを送信しているURLを指定し、要求を送信するURLを指定します.次に、val ()メソッドを使用して、フォーム要素の値をidで取得し、サーバーに送信するデータを指定するデータパラメータを送信します.CSRFHIGHTトークンの値を取得する必要があります.ご覧のように、どのフォームが送信されているかを確認するためのアクションを指定しました.
一度リクエストが正常に送信されると、我々はフォームをクリーニングしてすぐにポストの列に新しいポストを追加します.

The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append()).

リクエストを送信中にエラーが発生した場合😅) 最後の関数は、このエラー情報をコンソールに追加します.私はあなたが既にユーザーにエラーを表示する方法を知っていると思います.
最後に次の結果を得る

任務完了！

あなたはどのようにJajaxフォームを使用して🚀🚀
あなたは私のgit repositoryからこのプロジェクトをクローン化したり、ダウンロードしたり、TwitterやInstagramの上でフォローし、サポートすることを忘れないでください.👨‍🚀 次のチュートリアルを参照してください!
.ltag__tag__id__446 .アクションボタン
背景色:経度103 E 2 E!重要
カラー:竜華ffffff!重要
ボーダーカラー:唐辛子103 E 2 E!重要
｝

後傾

Djangoは、迅速な開発とクリーンで実用的なデザインを奨励するハイレベルなPython Webフレームワークです.経験豊富な開発者によって建てられた、それはあなたのホイールを再発明することなく、あなたのアプリケーションを書くことに焦点を当てることができるので、ウェブ開発の面倒の面倒を見る.それは無料でオープンソースです.