使用 AJAX 将表单数据保存到 PHP

如何将表单数据保存在文件或本地数据库（可能使用 AJAX）中，通过表单操作将数据发送到外部数据库？

我的表单的源代码在这里：http://jsbin.com/ojUjEKa/1/edit

我应该对代码进行哪些更改（如果有）？

EDIT:

正确的。因此，我可以使用 AJAX 将数据存储到 localStorage 中，并希望将存储的数据发送到名为 backend.php 的文件中。这是我的 html 文件：http://jsbin.com/iSorEYu/1/edit

这是我的 backend.php 文件：http://jsbin.com/OGIbEDuX/1/edit

AJAX 工作得非常好，可以将字段存储在 localStorage 中，但是当它尝试将数据发送到 backend.php 时，就会出现问题。我收到以下错误：

 [24-Jan-2014 08:40:34 America/Chicago] PHP Notice:  Undefined index: data in /home4/private/public_html/marketer/backend.php on line 7
 [24-Jan-2014 08:40:34 America/Chicago] PHP Warning:  Invalid argument supplied for foreach() in /home4/private/public_html/marketer/backend.php on line 10
 [24-Jan-2014 08:40:58 America/Chicago] PHP Notice:  Undefined index: data in /home4/private/public_html/marketer/backend.php on line 7
 [24-Jan-2014 08:40:58 America/Chicago] PHP Warning:  Invalid argument supplied for foreach() in /home4/private/public_html/marketer/backend.php on line 10

这里有什么问题？

LocalStorage 将是您最好的选择。我建议使用storejs因为他们的 API 直接、易于使用并且是 x 浏览器。

然后，您可以触发将表单值存储在每个字段的“模糊”事件上。

$('input').on('blur', function (e) {
  var el = e.target;
  store.set(el.attr('name'), el.val());
});

当您准备好提交到服务器时，您可以使用如下内容：

$('#formID').on('submit', function (e) {
  e.preventDefault();
  $.post('/my/save/route', store.getAll(), function () { ... });
});

当然，您可以在没有 storejs 的情况下完成所有这一切，并使用 vanilla JS 与原生交互本地存储API.