时间戳

首页 > 解决方案 > 如何在屏幕上显示用户输入的同时将用户数据保存到数据库

javascript - 如何在屏幕上显示用户输入的同时将用户数据保存到数据库

问题描述

在我的 js 文件中，我有一个在屏幕上显示用户数据的函数，但由于某种原因，这就是阻止数据保存到数据库的原因。我想要两者都有，所以没有 js 文件，它将它保存到数据库中。

编辑：我基本上想做的是永久上传客户在屏幕上输入的内容，这样其他客户就可以在将其保存到数据库的同时看到所有内容。但我的问题是我的 js 脚本阻止将客户端内容保存到数据库中。我是 Angular 的新手，但如果有人可以提供使用 $http.post 的示例，我将非常感激，如果这有助于我的要求。

编辑：我有点发现我的问题，但我还没有完全解决它。来自按钮元素的 ng-click 阻止了客户端数据保存到数据库，但现在启用提交后的按钮，导致提交许多表单。我该如何处理？我对这个网站还很陌生，所以这会改变我的问题吗？

HTML

<form action="/blog" method="POST">
    <div id="textarea-format-structure">
        <textarea name="dummyInfo" id="blogVal" ng-model="textAreaValue" 
         ng-change="textChange()" ng-focus="btnChange = true" />
    </div> 
  <button ng-disabled="btnChange" ng-click="btnChange = true"  class="btnpost">Post</button>
</form> 
<div id="my-posts-blog"></div>

JS

 function postVal() {
     var blogVal = document.getElementById("blogVal");
     var appendVal = document.getElementById("my-posts-blog");
     var create_div = document.createElement("div");

     create_div.textContent = blogVal.value;
     create_div.classList.add("post");
     appendVal.prepend(create_div);

     blogVal.value = "";
  }
      document.getElementById("blogVal").focus();
      var postIt = document.querySelector(".btnpost");
         postIt.addEventListener("click", postVal, false);

节点.JS 

router.post("/blog", (req, res) => { 
       mongo.connect(url, { useNewUrlParser: true }, (err, client) => { 
        var db = client.db("test");
        db.collection("collect").insertOne({ myBlog: req.body.dummyInfo});
   });
 });

标签： javascripthtmlnode.jsangularjsmongodb

解决方案

如果您使用的是 angularjs，那么为什么不使用 $http.post 呢？

  • 因此，在 ng-click 上，您可以进行函数调用，在该函数中设置您要设置的任何变量，准备好要传递的数据并使用 $http.post 和参数在后端进行调用。它不会刷新您的屏幕。

推荐阅读