表单提交值给出 null - mongoose 和 express js答案

【问题标题】：Form submit value giving null - mongoose and express js表单提交值给出 null - mongoose 和 express js
【发布时间】：2021-04-27 21:34:01
【问题描述】：

我正在尝试使用 express 将数据从基本的 html 表单发送到 mongodb。但是当我发布它时它给了我null。

我使用了以下架构：commentname: String.

这是 HTML：

<form id="form" onsubmit="return false;">
  <input type="textbox" id="cmt-1" placeholder="comment here"/>
</form>
<button type="button" onclick="submit()" class="submit">
  submit
</button>

JS：


var cmt = document.getElementById('cmt-1').value;
var comment = {commentname: ''};
comment = {commentname: cmt};

function submit () {
  async function postData (url = '', data = {}) {
    const response = await fetch(url, {
      method: 'POST',
      mode: 'same-origin',
      cache: 'no-cache',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data) // body data type must match "Content-Type" header
    });
    return response.json(); // parses JSON response into native JavaScript objects
  }

  postData(
    'https://realtime-comt-system-100.glitch.me/comments/add',{comment}
  )
  .then(data => { console.log(data); });
}

我错过了什么？

【问题讨论】：

标签： javascript node.js express mongoose mongoose-schema

【解决方案1】：

只需尝试此代码，但请检查我输入的网址。不要放整个 url 只放路径名。也把这段代码复制和粘贴，html和java脚本都把它们都拿走了，因为我都改变了它们

var form = document.getElementById('form');


form.addEventListener('submit', async(e) => {
    e.preventDefault();
    
    let cmt = form.cmt.value;
let data = {commentname: cmt};

 const response = await fetch('/comments/add', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
      
      }).then(res =>{
      console.log(res)
      }).catch(err){
      console.error(err)
      }
    
    })

<form id="form">
  <input type="textbox" id="cmt-1" name='cmt' placeholder="comment here"/>
</form>
<button type="submit" onclick="submit()" class="submit">
  submit
</button>

【讨论】：

谢谢！我对cmt= form.cmt.value 做了一些改动，然后改成了cmt=document.getElementById(cmt-1).value，效果很好！

【解决方案2】：

问题不是由上面发布的代码引起的。

这是一个 Mongoose 问题。您正在尝试创建两个具有相同 id 的文档，但该 id 已被指定为 Mongoose 独有的。

这是代码在正文中发布到后端的内容，一个 JSON 字符串：

{"comment":{"commentname":"my sample comment"}}

您在对象内部发布对象的事实看起来很可疑。这种模式会更常见：

{"commentname":"my sample comment"}

但由于没有发布后端代码，因此无法判断这是否正确。

当我尝试使用 Postman 将 {"comment":{"commentname":"my sample comment"}} 发布到后端 URL 时，我收到了以下响应代码：

400 Bad Request

响应正文：

"Error: MongoError: E11000 duplicate key error collection: database.comments index: commentname_1 dup key: { commentname: null }"

来自Mastering JS - Debug E11000 Errors in Mongoose

MongoDB 的 E11000 错误是一个常见的混淆源。当两个文档在 Mongoose 架构中定义为唯一的字段具有相同的值时会发生此错误。

Mongoose 模型有一个始终唯一的 _id 字段。

【讨论】：