Question

我正在实现一个相对简单的自动保存系统，我想使用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请求？

Answer 1

你可以使用带有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},
    });
}

Answer 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},       
    });
  });
});

Answer 3

只需将您的期刊更新程序放在dom：loaded事件中。它用于确保所有组件都已加载，比使用window.onload事件更好。请记住，dom：加载事件和本机window.onload事件之间有一点点不同，其中dom：在所有dom加载时加载调用除了images和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
     });
});

使用原型和PHP自动保存表单输入

3 个答案: