javascript - 通过 Ruby 将 HTML 表单发送到 MongoDB

Question

我正在尝试学习一项新技能，只是作为一种爱好，虽然我学到了很多东西，但仍然有一些事情让我感到困惑 - 这就是其中之一。

我设置了一个 MongoDB，其中包含 DB = 电话和集合 = 记录，正如您可能已经猜到的那样，它存储电话目录。我创建了一个 JSON 文件并导入了所有内容，一切顺利。

然后我创建了一个 Ruby/Sinatra 应用程序来显示表中的数据。这一切都很好。

现在我想使用 HTML 表单向数据库提交新用户。我的测试基本表单如下，位于 Sinatra 公共(public)目录中，名为 myTest.html

<form id="form">
    First name:<br>
    <input type="text" name="fname" value="Mickey">
    <br> Last name:<br>
    <input type="text" name="lname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit" id="commit">
  </form>
  <script>

(我省略了 action=""，因为我试图通过 AJAX 执行此操作，但它不起作用)这是我的 AJAX 尝试:

<script>
    $(function() {
      $.ajax({
        url: 'http://localhost:4567/api/v1/myTest',
        type: 'post',
        dataType: 'json',
        jsonp: 'json', // mongod is expecting the parameter name to be called "jsonp"
        success: function(data) {
          //console.log('success', data);
          console.log("Success");
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          console.log('error', errorThrown);

        }
      });
    });

在我的 Ruby 文件phone.rb 中，我有以下内容:

get '/myTest' do
result = Record.collection.insert_one({ :fname =>"Justin"})
end

我已经验证这会起作用。

我遇到的困难是连接两者(或者我什至需要吗？)当我单击表单上的提交按钮时，我得到一个像这样的 URL 编码字符串:

localhost:4567/myTest.html?fname=Justin&lname=Smith

如何从表单中获取 URL 数据，并将其作为新文档插入到 Mongo 中？

我花了两天时间寻找答案，但网上几乎所有信息都以 Rails 的形式返回，但我没有使用它。我想先学会用 Ruby 做所有事情。当我从 Javascript 方面查看问题时，几乎所有引用都指向 Node.js，而我没有使用 Node.js。

任何帮助，或者至少是在正确的方向上的点头，我们将不胜感激。 谢谢

更新 显然我在 Ruby 中犯了一个错误 - 它应该是 POST。因此，我创建了一个新的 Ruby block ，当我直接从浏览器访问它并输入 localhost/api/v1/myTest?fname=Mickey&lname=Mouse 时，它​​将信息输入数据库

post '/myTest' do
fname = params[:fname]
  lname = params[:lname]
  Record.collection.insert_one({'fname' => fname, 'lname' => lname})
end

在表单上，​​我尝试添加以下内容:

<form id="form" method="POST" action="/myTest">
    First name:<br>
    <input type="text" name="fname">
    <br> Last name:<br>
    <input type="text" name="lname">
    <br><br>
    <input type="submit" value="Submit" id="commit">
  </form>
<script>
    $(function() {
      //hang on event of form with id=myform
      $("#form").submit(function(e) {

        //prevent Default functionality
        e.preventDefault();

        //get the action-url of the form
        var actionurl = '/myTest';


        $.ajax({
          url: actionurl,
          type: 'post',
          dataType: 'application/json',
          data: $("#form").serialize(),
          success: function(data) {
            console.log('success')
          }
        });

      });

    });
  </script>

我无法访问 Ruby/myTest。我不断收到“Sinatra 不知道这个小曲”404。是否我没有使用 Sinatra 在 Views 文件夹中将 HTML 创建为 erb？我的页面位于 Public 文件夹中，并且是独立于 Sinatra 编写的。

Answer 1

首先，在您的 javascript 代码中，您没有发送任何表单数据，即名字和姓氏(请参阅 jQuery $ajax docs )。其次，您尝试发送 POST 请求，而您的 Sinatra 应用程序定义了 GET 端点。一旦您确保您的 Sinatra 应用程序收到从 HTML 表单发送的正确数据，您就可以使用 mongo-ruby-driver 在 MongoDB 中轻松创建新记录。