私は同様の質問で回答を見ましたが(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'>
を使用してページをリロードせずに応答をレンダリングします。
しかし、私は[この投稿](https://realpython.com/blog/python/django-and-ajax-form-submissions/)に基づいてコードを書いています。それは動作しませんでした、私はデバッグし、コメントを開始したライン。私は何か間違ったことをしていたと思う。ありがとう! – Manuel