如何在没有 ajax 的流星中使用 post 方法提交表单？答案

【问题标题】：How do I submit a form with a post method in meteor without ajax?如何在没有 ajax 的流星中使用 post 方法提交表单？
【发布时间】：2014-11-24 20:44:41
【问题描述】：

我对流星的理解是表单提交不需要 ajax，但是我想知道如何处理 Template.form.event 提交表单事件并在 javascript 中进行 POST 休息提交，因此页面不会继续执行操作目的地它只是发送数据并停留在页面上。如何在没有 ajax 的情况下在 javascript 中进行 POST。我认为有一个明显的答案，只是似乎无法想到。我需要安装一个rest包吗？

我不希望运行表单操作，而是传递到 javascript 并通过 POST 发送，而不在 METEOR 中刷新页面。

这是表格

<form accept-charset="UTF-8" action="https://formkeep.com/f/randomnumbers" method="POST" id="contact-form">
  <input type="hidden" name="utf8" value="✓">

  <input type="text" placeholder="Name">


  <input type="phone" placeholder="Phone Number">


  <input type="email" placeholder="Your Email">

  </form>

【问题讨论】：

嗯，如果您不能使用 Ajax，那么您可以发布到新窗口或隐藏的 iframe。
我可以使用 ajax，我只是假设 Meteor 不需要 ajax。
捕捉事件并使用 Meteor.methods 而不是 ajax？
因为它没有，所以你可以阻止表单加载，比如这个'点击表单'：function(e){e.preventDefault();并且你有很多教程如何通过流星获取数据表单 html

标签： javascript forms post meteor

【解决方案1】：

您假设您不需要使用 AJAX 来执行表单请求提交是正确的，您应该使用 Meteor DDP 协议，通过使用 Meteor 方法。

首先，定义你的 Meteor 方法来执行所需的操作，这里是一个例子：

Meteor.methods({
  addContact: function(contact){
    check(contact, {
      name: String,
      phoneNumber: String,
      email: String
    });
    //
    return Contacts.insert(contact);
  }
});

此方法只是在检查参数格式正确后将联系人添加到集合中。

接下来，您需要在表单提交事件处理程序中调用此方法，如下所示：

Template.myForm.events({
  "submit": function(event, template){
    // prevent default form submission handler : which is
    // performing an HTTP POST request that will reload the page
    event.preventDefault();
    // construct the contact object that will be passed to the method
    var contact = {
      // assuming each input fields have ids attribute
      name: template.$("#name").val(),
      phoneNumber: template.$("#phoneNumber").val(),
      email: template.$("#email").val(),
    };
    // perform the server-side asynchronous call
    Meteor.call("addContact",contact);
  }
});

【讨论】：