Django，通过AJAX提交表格

我看到类似问题的答案（here和here），但它们都不适用于我的情况。我在模板中有一个简单的表单，我使用引导进行渲染。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'>，它将呈现响应而不重新加载页面。

来源

2016-04-26 Manuel