Question

我已经看到了类似问题的答案（here和here），但在我的案例中没有一个可行。我在模板中有一个简单的表单，我使用bootstrap进行渲染。

提交表单后，响应将直接在浏览器中呈现。当我返回上一页（使用浏览器的按钮）时，将执行AJAX调用的 success 部分。

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

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

Answer 2

您可以使用before_update代替自定义发送数据，请在以下链接中打开：

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

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

Django，通过AJAX提交表单

2 个答案: