Question

我试图实现非常简单的东西，我只想将表单发布到自己而不刷新，但是我需要它从控制器捕获的表单中发布数据。我在后端获取数据我只需要表单即可成功发布而无需刷新，然后显示和隐藏某些内容。另外，我收到此错误

Uncaught（在promise中）SyntaxError：意外的标记＆lt;在位置0的JSON中

我认为这就是为什么我没有达到我的条件

const wrappers = document.querySelectorAll('.form-wrapper');

if (wrappers) {
wrappers.forEach(function(el){
    const form = el.querySelector('.submit-form');
    let currentURL = window.location.href;
    const output = el.nextElementSibling;

    form.addEventListener('submit', function(e){
        const data = new FormData(form);
        fetch(`${currentURL}`, {
            credentials: 'include',
            method: 'POST',
            body: data,
        })
        .then((res) => res.json())
        .then((res) => {
            if (res.success) {
                console.log('submitted');
                output.classList.remove('none');
                form.classList.add('none');
            }
            else if (res.error) {
                console.log('Error: ' + res.error); 
            }
        });
        e.preventDefault();
    },false);
});
}

Answer 1

将事件对象中的preventDefault用于块的开头：

form.addEventListener('submit', function(e) {
  e.preventDefault();
  ...
}

如果您的POST请求未成功，请提供catch块：

fetch(`${currentURL}`, {
  credentials: 'include',
  method: 'POST',
  body: data,
})
.catch(err => console.log(err));

使用fetch将json发布到同一页面

1 个答案: