Question

Ajax提交表单有效，但是我无法停止页面重新加载。

我已经尝试通过ID监听事件的几种变体。在表单上，尝试使用嵌入式onclick，onsubmit按钮将按钮放在表单外部。

<form method="post" id="form1">
      {% csrf_token %}
      {{ form|crispy }}
      <button type="submit">Click</button>
    </form>

function parse_cookies() {
    var cookies = {};
    if (document.cookie && document.cookie !== '') {
        document.cookie.split(';').forEach(function (c) {
            var m = c.trim().match(/(\w+)=(.*)/);
            if(m !== undefined) {
                cookies[m[1]] = decodeURIComponent(m[2]);
            }
        });
    }
    return cookies;
}
var cookies = parse_cookies();

var title = document.getElementById('title_identifier');

function ajax_function() {
  var request = new XMLHttpRequest();
  request.open("POST", `/ajax_post_function/${title.textContent}/`, true);
  request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
  var formElement = document.querySelector("#id_comment");
  request.send(new FormData(formElement));
}

form = document.getElementById('form1')
form.addEventListener('submit', ajax_function)

如果我将事件处理程序从表单更改为按钮，反之亦然，则它成功发布，并在chrome dev工具中显示以下消息：（1）

VM667 ajax_post_function.js:22 XHR finished loading: POST "http://localhost:8000/ajax_post_function/WhateverTitle/".

Navigated to http://localhost:8000/ajax_post_function/WhateverTitle/

但是它再次回到页面顶部。

但是，如果我使用此ajax函数，则不会提交评论，而chrome开发工具的响应是：

function ajax_function(e) {
  var request = new XMLHttpRequest();
  request.open("POST", `/ajax_post_function/${title.textContent}/`, true);
  request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
  var formElement = document.querySelector("#id_comment");
  request.send(new FormData(formElement));
  e.preventDefault();
}

ajax_post_function.js:34 XHR finished loading: POST "http://localhost:8000/ajax_post_function/WhateverTitle/".

如果我使用：

return false;

在任何版本的ajax_function中，

表单提交成功，但是再次重新加载并返回页面顶部，chrome开发工具中的消息与（1）示例中的消息相同。

我一直在更改之间使用shift + f5作为缓存清除。我宁愿不使用jquery。

为路线提供服务的视图函数很长，我不确定它是否相关，因此没有在此处发布。 Ajax将其发布到相同的路线。

Answer 1

您尝试过这样吗？

$(document).ready(function(){
 $('#form1').on('submit',function(e) {
 e.preventDefault();
 var request = new XMLHttpRequest();
 request.open("POST", `/ajax_post_function/${title.textContent}/`, true);
 request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
 var formElement = document.querySelector("#id_comment");
 request.send(new FormData(formElement));
 }
}

Django / vanilla javascript ajax成功发布，但页面仍重新加载

1 个答案: