Django, submiting a form via AJAX
<p>I have seen answers (<a href="https://stackoverflow.com/questions/14837312/django-taking-input-and-showing-output-in-the-same-page?lq=1">here</a> and <a href="https://stackoverflow.com/questions/22594976/submitting-a-django-form-in-a-bootstrap-modal">here</a>) for similar questions, but none of them work in my case. I have a simple form in a template, I am using bootstrap for rendering. </p>

<p>Once I submit the form, the response is rendered directly in the browser. When I return to the previous page (with the browser's button) then the <strong>success</strong> part of the AJAX call is executed.</p>

<p><strong>forms.py</strong></p>

<pre><code>class QueryForm(forms.Form):
    query = forms.CharField(label='Discover something', max_length=256)
</code></pre>

<p><strong>views.py</strong></p>

<pre><code>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')
</code></pre>

<p><strong>urls.py</strong></p>

<pre><code>urlpatterns = [
    url(r'^query', views.query_view, name='query_view'),
    url(r'^', views.home, name='home'),
]
</code></pre>

<p><strong>query_template.html</strong></p>

<pre><code>{% extends 'base.html' %}

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

{% block content %}

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

    &lt;script src="{% static 'scripts/main.js' %}"&gt;&lt;/script&gt;
{% endblock %}
</code></pre>

<p><strong>main.js</strong></p>

<pre><code>$('#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("&lt;li&gt;" + json.result + "&lt;/li&gt;");
            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
</code></pre>

<p>I have been playing with the code. If instead a form I use <code>&lt;input&gt;</code> and <code>&lt;button id='query-button'&gt;</code> it renders the response without reloading the page.</p>