通过 POST 方法通过 Javascript 提交表单

Question

索引.js

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('#compose').addEventListener('click', compose_email);

  document.querySelector('#compose-form').onsubmit = send_email;
  // By default, load the inbox
  load_mailbox('inbox');
});

function compose_email() {

  // Show compose view and hide other views

  document.querySelector('#compose-view').style.display = 'block';

  // Clear out composition fields
  document.querySelector('#compose-recipients').value = '';
  document.querySelector('#compose-subject').value = '';
  document.querySelector('#compose-body').value = '';
  
}


function send_email()
{
  const recipients = document.querySelector('#compose-recipients').value;
  const subject = document.querySelector('#compose-subject').value;
  const body = document.querySelector('#compose-body').value;
  //console.log(recipients)

  fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
        recipients: recipients,
        subject: subject,
        body: body,
    })
  })
  .then(response => response.json())
  .then(result => {
      // Print result
      console.log(result);
});
}

收件箱.html

<div id="compose-view">
    <h3>New Email</h3>
    <form id="compose-form">
        <div class="form-group">
            From: <input disabled class="form-control" value="{{ request.user.email }}">
        </div>
        <div class="form-group">
            To: <input id="compose-recipients" class="form-control">
        </div>
        <div class="form-group">
            <input class="form-control" id="compose-subject" placeholder="Subject">
        </div>
        <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
        <input type="submit" class="btn btn-primary"/>
    </form>
</div>

通过 POST 方法通过 Javascript 提交表单，但我得到了GET /? HTTP/1.1" 200 1667 终端中的GET /? HTTP/1.1" 200 1667 .. 通过 POST 应该是 201

当我在 Console.It 中编写 fetch 函数时，它工作正常

提交表单后，它只是返回到收件箱页面。

Answer 1

由于您在代码中执行“获取”，因此您应该阻止“提交”按钮单击时的默认表单提交（这是默认行为）。 为此，您可以在“send_email”函数中接收“事件”作为参数，然后执行“event.preventDefault()”。

function send_email(event) {
   // Your code
   ...
   // Prevent the default form submission
   event.preventDefault();
}

更多详情@ https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit