javascript - 将数据从文本框提交到 Firebase 不起作用

Question

我在 HTML 中有这个文本框:

    <script src="../js/writeTo.js"></script>
    <form>
        <div class="post-title">
            <input type="text" placeholder="Post Title">
        </div>
        <div class="post-content">
            <textarea type="text" placeholder="Post Content"></textarea>
        </div>
        <button type="submit" class="submit">Submit</button>
    </form>

我的名为 writeTo.js 的 js 文件包含以下代码:

    var url = "https://blog-posts.firebaseio.com/";

    var firebaseRef = new Firebase(url);


    function funct1()

    {
var title = $('#post-title').val();

     var post = $('#post-content').val();

     var date = Date();

     firebaseRef.set({Title: +title, Content: +post, Date: +Date()});

    }



    submit.onclick = funct1();

当我在文本框中键入内容并单击提交时，我查看了我的 Firebase，但没有新数据(我也是 Firebase 的新手)。

它不起作用，有人能看出问题所在吗？ (大概有几个，我是JavaScript新手)

Answer 1

您的脚本存在一些问题。我已经在 this jsfiddle 中解决了它们, 但也会在下面解释。

获取输入的文本内容

输入的 HTML 如下所示:

<div class="post-title">
    <input type="text" placeholder="Post Title">
</div>

您用来读取值的 JavaScript 是:

var title = $('#post-title').val();

如果您阅读 the documentation for val ，您会看到它是要在 input 元素本身上调用的。您在包装 div 上调用它。

最简单的改变是像这样获取值:

var title = $('#post-title').text();

将处理程序与表单相关联

你用这样的形式连接你的事件处理程序:

submit.onclick = funct1();

不幸的是，这不会像您预期的那样工作。

所做的是:

1. 调用funct1
2. 将funct1的返回值赋给onclick

你想做的是:

submit.onclick = funct1;

所以这会将 funct1 分配给 onclick。

顺便说一句，您可能想阅读更现代的分配事件处理程序的方法。

将值传递给 Firebase

您将值传递给 Firebase 的代码似乎有点不对劲。改用这个

 firebaseRef.set({Title: title, Content: post, Date: date});

取消表单提交的常规浏览器处理

浏览器通常通过将表单的值发布到 URL 来处理对表单提交按钮的点击。

但是在您的应用程序中您自己处理这个，所以您应该告诉浏览器忽略提交。

您可以通过从您的函数返回 false 来做到这一点:

 return false;

请注意，这将在 Chrome 中发出以下警告:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

所以你确实应该考虑使用 event.preventDefault()而不是返回 false。请参阅下面的完整代码以了解如何执行此操作。

完整代码

var url = "https://blog-posts.firebaseio.com/";

var firebaseRef = new Firebase(url);

function funct1(evt)
{
  var title = $('#post-title').text();

  var post = $('#post-content').text();

  var date = Date();

  firebaseRef.set({Title: title, Content: post, Date: date});
  evt.preventDefault();
}

var submit = document.getElementsByTagName('button')[0];

submit.onclick = funct1;

添加新帖子，而不是覆盖现有帖子

您的代码现在将替换您 Firebase 中的博客文章。我想您可能更愿意在按下提交按钮时添加新帖子。

为此，您需要调用 Firebase 的 push 函数。 Firebase 在 managing lists 上有一些很棒的文档.

它的要点是这样的:

var postRef = firebaseRef.push(); // create a new post
postRef.set({Title: title, Content: post, Date: date});

因此，您创建了一个新帖子，然后在该帖子上设置您的值，而不是在顶级 Firebase 引用上。