使用 Prototype 和 PHP 自动保存表单输入答案

【问题标题】：Autosaving Form Input Using Prototype and PHP使用 Prototype 和 PHP 自动保存表单输入
【发布时间】：2010-11-28 08:25:03
【问题描述】：

我正在实现一个相对简单的自动保存系统，我想使用 Prototype 库来实现。我正在使用 PeriodicalUpdater 请求，但它没有像我希望的那样工作。简而言之，我正在尝试通过 AJAX 请求定期将 textarea 的内容发送到 PHP 页面，该页面会将其保存到 MySQL 数据库中。我正在做类似的事情（缩写代码）：

<html>

<head>

<script type="text/javascript" src="scripts/prototype.js"></script>

<script>

    function autosave() {
        new Ajax.PeriodicalUpdater('save_message', 'autosave.php', 
            { 
                method: 'post',
                parameters: {id: $('id').value, save_text: $('myInput').value},
                frequency: 5,
                decay: 2

            });
    }

</script>
</head>

<body>
<input type="hidden" id='id' name='id' />
<textarea id='myInput' name='myInput'></textarea>

<script>
autosave();
</script>
</body>
</html>

然后 autosave.php 将获取表单内容并将它们写入我的数据库。那部分工作正常。正如我发现的那样，正在发生的事情是使用原始表单输入调用 PeriodicalUpdater，然后使用该初始表单输入定期调用。

所以对于一个相对较短的问题来说，这是一个很长的设置：如何使用 Prototype（如果可能）使用当前 textarea 的值定期发出 AJAX 请求？

【问题讨论】：

标签： php ajax prototypejs

【解决方案1】：

只需将您的定期更新程序放在 dom:loaded 事件中。它用于确保所有组件都已加载，比使用 window.onload 事件更好。请记住，dom:loaded 事件和原生 window.onload 事件之间有一点不同，其中 dom:loaded 在加载除图像之外的所有 dom 时调用，而 window.onload 在加载所有 dom 包括图像文件时调用。

document.observe("dom:loaded", function() { 
     new Ajax.PeriodicalUpdater('save_message', 'autosave.php', { 
          method: 'post',
          parameters: {id: $('id').value, save_text: $('myInput').value},
          frequency: 5,
          decay: 2
     });
});

【讨论】：

【解决方案2】：

Ajax.Request 是正确的举措，但为什么不让它更可重用如果您只有一个输入，或者即使您有很多输入，我也会建议：

<form action="/user/4" method="post">
  <input type="text" name="user[name]" value ="John" class="_autosave" />
  <input type="hidden" name="user[id]" value ="4" class="uid"/>
  <input type="submit" />
</form>

...

$$('input._autosave').each(function(s){
  s.observe("change", function(event){
    var el = event.element();
    var uid = el.next("uid").value;
    var r = new Ajax.Request(el.up("form").readAttribute("action"),{
      parameters: {el.readAttribute("name"): el.value},       
    });
  });
});

【讨论】：

【解决方案3】：

您可以只使用带有 setinterval 的 Ajax.Request，如下所示：

document.observe("dom:loaded", function() { 
    intervalID = window.setInterval("autosave()",500);
});

function autosave() {
    new Ajax.Request('autosave.php', 
    { 
        method: 'post',
        parameters: {id: $('id').value, save_text: $('myInput').value},
    });
}

【讨论】：