Django，通过 AJAX 提交表单

Question

我看过类似问题的答案 (here and here)，但其中 none 对我有效。我在模板中有一个简单的表单，我正在使用 bootstrap 进行渲染。

提交表单后，响应直接呈现在浏览器中。当我 return 到上一页（使用浏览器的按钮）时，将执行 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'> 的表单，它会在不重新加载页面的情况下呈现响应。

Answer 1

您可以使用 FormData 而不是自定义发送数据，打开以下链接：

How to send FormData objects with Ajax-requests in jQuery?

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 2

您需要阻止 HTML 表单的默认提交操作，通过 event.preventDefault()。

Django，通过 AJAX 提交表单

Django, submiting a form via AJAX

django

ajax

django-bootstrap3