从文本框提交数据到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

您的脚本存在一些问题.我在这个jsfiddle中解决了它们,但也将在下面解释.

获取输入的文本内容

您输入的HTML如下所示:

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

用于读取值的JavaScript是:

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

如果您阅读了文档val,您将看到它应该在input元素本身上调用.你在包装上调用它div.

最简单的变化是获得如下值:

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

将处理程序与表单相关联

您使用以下形式连接事件处理程序:

submit.onclick = funct1();

不幸的是,这不会像你期望的那样有效.

这是做什么的:

1. 调用 funct1
2. 指定funct1to 的返回值onclick

你想要做的是:

submit.onclick = funct1;

所以这将分配funct1给onclick.

您可能想要阅读更现代的方法来分配事件处理程序btw.

将值传递给Firebase

您将值传递给Firebase的代码似乎有点过时了.请改用它

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

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

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

但是在您的应用程序中,您自己处理此问题,因此您应该告诉浏览器忽略提交.

您可以通过false从函数返回来执行此操作:

 return false;

请注意,这会在Chrome中显示以下警告:

不推荐使用event.returnValue.请改用标准的event.preventDefault().

所以你应该考虑使用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有一些关于管理列表的优秀文档.

它的要点是:

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

因此,您创建一个新帖子,然后在其上设置您的值,而不是在顶级Firebase参考号上.