2016-04-26 19 views
0

私は同様の質問で回答を見ましたが(herehere)、私の場合はどちらもうまくいきません。テンプレートにシンプルなフォームがあり、レンダリングにブートストラップを使用しています。Django、AJAX経由でフォームを提出しました

フォームを送信すると、レスポンスはブラウザで直接表示されます。 (ブラウザのボタンを使って)前のページに戻ると、成功のAJAX呼び出しの一部が実行されます。

forms.py

class QueryForm(forms.Form): 
    query = forms.CharField(label='Discover something', max_length=256) 

views.py

def query_view(request, id): 
    if request.method == 'POST': 
     # Just for testing, send True 
     response_data = { 
      'result': True 
     } 

     return HttpResponse(json.dumps(response_data), content_type="application/json") 
    else: 
     try: 
      # Create a form and send it to the template 
      query_form = QueryForm() 

      return render(request, 'query_template.html', {'query_form': query_form}) 
     except ObjectDoesNotExist: 
      return render(request, 'error.html') 

urls.py

urlpatterns = [ 
    url(r'^query', views.query_view, name='query_view'), 
    url(r'^', views.home, name='home'), 
] 

query_template.html

{% extends 'base.html' %} 

{% load static %} 
{% load bootstrap3 %} 

{% block content %} 

    {# Display a form #} 
    <form method="post" class="form"> 
     {% csrf_token %} 
     {% bootstrap_form query_form %} 
     {% buttons %} 
      <button class="btn btn-primary" id="query-button"> 
       {% bootstrap_icon "star" %} Submit 
      </button> 
     {% endbuttons %} 
    </form> 
    <ul id="result"></ul> 

    <script src="{% static 'scripts/main.js' %}"></script> 
{% endblock %} 

main.js

$('#query-button').click(function (event) { 
    $.ajax({ 
     url: "/query/", 
     type: "POST", 
     data: {}, 
     cache: false, 

     // handle a successful response 
     success: function (json) { 
      console.log(json); // log the returned json to the console 
      $("#result").html("<li>" + json.result + "</li>"); 
      console.log("success"); // another sanity check 
     }, 

     // handle a non-successful response 
     error: function (xhr, errmsg, err) { 
      console.log(xhr.status + ": " + xhr.responseText); 
     } 
    }); 
}); 

// It also includes functions to manage the CRFS token 

私はコードで遊んでてきました。代わりに、フォーム私は<input><button id='query-button'>を使用してページをリロードせずに応答をレンダリングします。

答えて

2

はデフォルトがevent.preventDefault()を経由して、HTMLフォームのアクションを提出防ぐ必要があります。

+0

しかし、私は[この投稿](https://realpython.com/blog/python/django-and-ajax-form-submissions/)に基づいてコードを書いています。それは動作しませんでした、私はデバッグし、コメントを開始したライン。私は何か間違ったことをしていたと思う。ありがとう! – Manuel

関連する問題