将值传递给 JSON Post 请求

Question

我最初的问题是当用户点击撰写按钮而不是发送按钮时获取值。

我现在已将其更改为在用户单击发送时使用不同的新功能。但是，现在它什么也没做。

有人可以告诉我我做错了什么吗？我在 HTML 中使用了 onclick 方法，然后在我的 Javascript 页面上创建了函数。

HTML:

<div id="compose-view">
        <h3>New Email</h3>
        <form id="compose-form"
        method="POST">
            {% csrf_token %}
            <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" id="sendEmail" class="btn btn-primary"/>
        </form>
    </div>

JS:

const element = document.getElementById('sendEmail');
  element.addEventListener('click', function() {
    fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
      recipients: 'card51short@gmail.com',
      subject: "buglets",
      body: 'Hes a fat one'
    })
  })
  .then(response => response.json())
  .then(result => {
      // Print result
      console.log(result);
  });
  });
}

Answer 1

好的，在这种情况下，您需要对您的代码进行调查：

检查 fred 是否实际上是一个字符串，而不是 undefined。另外，使它成为一个显式常量

  const fred = document.querySelector('#compose-subject').value // changed
  console.log(fred); // new

  fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
      recipients: 'card51short@gmail.com',
      subject: fred,
      body: 'Hes a fat one'
    })
  })
  .then(response => response.json())
  .then(result => {
      // Print result
      console.log(result);
  });

如果一切正常，请检查提取返回的内容：

  const fred = document.querySelector('#compose-subject').value

  fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
      recipients: 'card51short@gmail.com',
      subject: fred,
      body: 'Hes a fat one'
    })
  })
  .then(response => { // edited
    console.log(response); // new
    return response.json() // edited
  }) // edited
  .then(result => {
      // Print result
      console.log(result);
  });

在此过程结束时，您应该会发现什么不起作用

Answer 2

“值”属性 returns 未为非输入标签定义。尝试改用 innerHTML：

fred = document.querySelector('#compose-subject').innerHTML;

通过cosole.log测试你对弗雷德的价值：

console.log(fred);

将值传递给 JSON Post 请求

Passing in values to a JSON Post request

javascript

json

event-handling