Question

我想在firebase中存储/推送输入数据。

表单HTML

<form>
<input name="name" type="name" placeholder="Title" id="titleInput" />
<button type="submit" class="btn" onclick="submitPost()">Submit</button>
</form>

将输入数据推送到firebase

var myDataRef = new Firebase('https://eloquatest.firebaseio.com/');
myDataRef.on('child_added', function(snapshot) {
  var post = snapshot.val();
});

function submitPost(e) {
  var myDataRef = new Firebase('https://eloquatest.firebaseio.com/');
  var name = $('#titleInput').val();
  myDataRef.push({name: name});
}

以上代码适用于此jsfiddle。在我的情况下，我无法将https://cdn.firebase.com/v0/firebase.js放在网站标题中，所以我想用Ajax进行尝试。

与jquery一样构建HTML

$('header').prepend ('<form><input name="name" type="name" id="titleInput"/>    
<button type="submit" onclick="submitPost()">Submit</button></form>');

我对Ajax并不熟悉，而且转换后的代码不起作用。帮助吗

$.ajax({
  url: 'https://cdn.firebase.com/v0/firebase.js',
  dataType: 'script',
  cache: true,
  success: function () {
  var myDataRef = new Firebase('https://eloquatest.firebaseio.com/');
  myDataRef.on('child_added', function(snapshot) {
  var post = snapshot.val();
  displayUserPost(post.name);
});
}
});

$.ajax({
  url: 'https://cdn.firebase.com/v0/firebase.js',
  dataType: 'script',
  cache: true,
  success: function submitPost(e) {
  var myDataRef = new Firebase('https://eloquatest.firebaseio.com/');
  var name = $('#titleInput').val();
  myDataRef.push({name: name});
  $('#postInput').val('');
  e.preventDefault();
}
});

Answer 1

这个想法是通过javascript向我们的DOM添加第三个脚本。添加onload函数来处理加载第三个脚本并执行您的操作。

你可以在你的js文件上添加这个脚本，在文件准备就绪并不是一个坏主意。

window.firebaseInit = function(){
     var myDataRef = new Firebase('https://eloquatest.firebaseio.com/');
     ......
     <Do whatever you want here!>
};

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//cdn.firebase.com/v0/firebase.js";
    js.onload = window.firebaseInit;
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'id-firebase'));

我从Facebook学习这个脚本。您可以使用jQuery.getScript并将您的init FireBase函数放在成功参数上，在此处记录：https://api.jquery.com/jquery.getscript/

使用Ajax保存输入数据

1 个答案: