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

【问题标题】：Submitting a form through Javascript via POST method通过 POST 方法通过 Javascript 提交表单
【发布时间】：2020-09-27 07:17:22
【问题描述】：

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

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

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

【问题讨论】：

method 是 form 元素的属性，而不是 div。在您的 html 中，您将其放置在错误的位置，因此默认为 GET w3schools.com/tags/att_form_method.asp
对不起，我已经编辑了问题并放错了位置.....我已经用代码正确编写了。要编辑问题谢谢。

标签： javascript webapi

【解决方案1】：

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

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

【讨论】：

谢谢您的回复但是问题是它没有提交表单
谢谢你，它成功了我是初学者，我无法理解你所说的
如果您认为它对您有帮助，请您将答案标记为已接受的解决方案。这也会对其他人有所帮助。