ジャンゴAJAXリクエストは、データ

Question

<form id="searchform"> 
    {% csrf_token %} 
    <div class="col-md-8"> 
     <input type="text" id="question" class="form-control" placeholder="question......" 
     name="question"> 
    </div> 
    <div class="col-md-2"> 
     <input class="btn btn-primary" type="submit" value="ASK"> 
    </div> 
<form> 

私は、このテンプレートを取得し、データが

<script type="text/javascript"> 
$("document").ready(function(){ 
    $("#searchform").submit(function() { 
     $.ajax({ 
      type: "POST", 
      url : "results", 
      data:{ 
       input:$("#question").val(), 
       csrfmiddlewaretoken: '{{ csrf_token }}' 
      }, 
      success : function(data){ 
       $('#answer').html(data); 
      } 
     },"json"); 
    }); 
}); 
</script> 

表示する得るために、AJAXリクエストを怒鳴るとビューが

def results(request): 
    if request.method == "POST": 
     resource = request.POST['input'] 
    return render(request, 'index.html',{"resource" : resource}) 

の下に、私は形でsumbitものですいけないことができますurl.butにはテンプレートで結果が表示されません。このコードの問題は何ですか？ありがとうございます。

Answer 1

私はあなたがこのコードを書いて見る方法を参照して問題がいくつかあります。フォーム提出を喜ばせることは簡単で、非常にエレガントに行うことができます。

あなたが共有したコードに基づいて説明しましょう。

まず、フォームにはアクションと方法がありません。適切に定義されたフォームは、ブラウザがjavascriptをサポートしていない場合でも動作するはずです。

フォームフォームフィールドの1つに名前パラメータがありません。

<form id="searchform" method="POST" action="{% url 'results' %}"> 
    {% csrf_token %} 
    <div class="col-md-8"> 
     <input type="text" id="question" name="input" class="form-control" placeholder="question......" 
     name="question"> 
    </div> 
    <div class="col-md-2"> 
     <input class="btn btn-primary" type="submit" value="ASK"> 
    </div> 
<form> 

あなたのjavascriptでは、オーバーライドを追加してデフォルト動作を防止するだけです。これはあなたのページがちょうどURLを変えている理由です。

より一般的なバージョンです。データペイロードなどを構成する必要はありません。

$(document).on('submit', "#searchform", function (event) { 
    event.preventDefault(); 
    var ele = $(this); 
    $.ajax({ 
    type: ele.attr("method"), 
    url: ele.attr("action"), 
    data: ele.serialize(), 
    success: function (data) { 
     $('#answer').html(data); 
    } 
    }); 
}); 

あなたの意見には問題はありません。

Answer 2

あなたのビューでJsonResponse対象：

from django.http import JsonResponse 

def results(request): 
    if request.method == "POST": 
     resource = request.POST['input'] 
    return JsonResponse({"resource" : resource}) 

Answer 3

あなたのフォームは、GETメソッドとGETパラメータ（フォームのデフォルト動作）を介して送信されます。単にそのデフォルトの動作を妨げる

$("#searchform").submit(function(event) { 
    event.preventdefault(); 
    ... 
}