通过 Javascript via POST 方法提交表单

Question

index.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);
});
}

inbox.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 的输出。它应该是 201 通过 POST

当我在 Console.It 中编写获取函数时工作正常

提交表单后返回收件箱页面。

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

通过 Javascript via POST 方法提交表单

Submitting a form through Javascript via POST method

javascript

webapi