使用 Ajax 保存输入数据答案

【问题标题】：Save input data with Ajax使用 Ajax 保存输入数据
【发布时间】：2016-04-12 07:03:56
【问题描述】：

我想在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();
}
});

【问题讨论】：

标签： javascript ajax database firebase

【解决方案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/

【讨论】：