通過 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