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

coder 2023-08-10 原文

我在 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新手)

最佳答案

您的脚本存在一些问题。我已经在 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();

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

所做的是:

调用funct1
将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 引用上。

关于javascript - 将数据从文本框提交到 Firebase 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20929515/

交到 javascript code pre Firebase html submit

有关javascript - 将数据从文本框提交到 Firebase 不起作用的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？最佳答案像Ruby中的所有其他对象
ruby - Ruby 有 `Pair` 数据类型吗？ - 2
有时我需要处理键/值数据。我不喜欢使用数组，因为它们在大小上没有限制(很容易不小心添加超过2个项目，而且您最终需要稍后验证大小)。此外，0和1的索引变成了魔数(MagicNumber)，并且在传达含义方面做得很差(“当我说0时，我的意思是head...”)。散列也不合适，因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题，但我很想知道:Ruby标准库是否已经带有这样一个类？最佳
ruby - 我如何添加二进制数据来遏制 POST - 2
我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2
本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01 客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02 数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit
使用canal同步MySQL数据到ES - 2
文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co
ruby-on-rails - 创建 ruby 数据库时惰性符号绑定(bind)失败 - 2
我正在尝试在Rails上安装ruby，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf
STM32读取串口传感器数据（颗粒物传感器，主动上传） - 2
文章目录1.开发板选择*用到的资源2.串口通信（个人理解）3.代码分析（注释比较详细）1.主函数2.串口1配置3.串口2配置以及中断函数4.注意问题5.源码链接1.开发板选择我用的是STM32F103RCT6的板子，不过代码大概在F103系列的板子上都可以运行，我试过在野火103的霸道板上也可以，主要看一下串口对应的引脚一不一样就行了，不一样的就更改一下。*用到的资源keil5软件这里用到了两个串口资源，采集数据一个，串口通信一个，板子对应引脚如下：串口1，TX：PA9，RX：PA10串口2，TX：PA2，RX：PA32.串口通信（个人理解）我就从串口采集传感器数据这个过程说一下我自己的理解，