event.preventDefault()?簡短的答案是在您自己的函數中為每個表單覆蓋常規表單提交onsubmit。然后使用 JQuery 異步執行 POST。這避免了服務器必須返回狀態為 204 的 HttpResponse，或者除了空的 JsonResponse 之外的任何其他內容。
我的網頁上有多個表單，因此我沒有為每個按鈕分配單個功能，如上面鏈接的答案中所示，但有幾個可以更改單個按鈕的行為。另外，對于 Django，還需要考慮在 POST 請求中包含 CSRF 令牌。
例如，一些帶有兩個按鈕的 html；
<form id="form-a" onsubmit="submit_form_a(event)">{% csrf_token %}
? ? <input type="hidden" name="button-a" value="some_value_for_a">
? ? <button type="submit" class="w3-button">Button A</button>
</form>
<form id="form-z" onsubmit="submit_form_z(event)">{% csrf_token %}
? ? <input type="hidden" name="button-z" value="some_value_for_z">
? ? <button type="submit" class="w3-button">Button Z</button>
</form>
然后是 Javascript，例如，第一個表單提交回調禁用按鈕；
function submit_form_a(e){
? ? e.preventDefault();
? ? var url = "/main/a"
? ? var formData = $(e.target).serialize();
? ? var btn = $(e.target).find("button");
? ? btn.prop("disabled", true);
? ? myPost(url, formData);
}
第二個提交回調使用優秀的W3.CSS執行一些動畫；
function submit_form_z(e){
? ?e.preventDefault();
? ?var url = "/main/z"
? ?var formData = $(e.target).serialize();
? ?var btn = $(e.target).find("button");
? ?btn.toggleClass("w3-animate-fading").toggleClass("w3-text-red")
? ?myPost(url, formData);
}
這兩個腳本都調用一個通用腳本mypost，該腳本使用 CSRF 令牌設置 XMLHttpResponse 標頭，然后將其發布；
// Make sure any AJAX POST requests are not going off-site. Prevents
// leaking the CSRF token.
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
? ? return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); }?
function myPost(url, data) {
? ? var csrftoken = $("[name=csrfmiddlewaretoken]").val();
? ? // Set the header on the AJAX POST request with the CSRF token
? ? $.ajaxSetup({beforeSend: function(xhr, settings) {
? ? ? ? if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
? ? ? ? ? ? xhr.setRequestHeader("X-CSRFToken", csrftoken);
? ? ? ? }
? ? }});
? ? $.post(url, data);
}
回到 Djangoviews.py方面，查看<input>表單中的數據并執行您需要執行的操作。我剛剛發現 iOS 上的按鈕本身并不包含在 POST 表單數據中，就像其他平臺上的那樣，因此需要隱藏的文本輸入元素；
if request.is_ajax() and request.method == 'POST':
? ? if 'button-a' in request.POST:
? ? ? ? # do something for A
? ? elif 'button-z' in request.POST:
? ? ? # do something for Z
? ? return JsonResponse({})
瞧！可以單擊按鈕，發生背景操作，并且頁面不會移動。您可以返回除空 JSON 響應之外的其他內容，并在表單回調中處理它，例如重新啟用按鈕，但我不需要這樣做。有關詳細信息，請參閱之前鏈接的答案。
