自動保存表單輸入使用原型和PHP

我正在實現一個相對簡單的自動保存系統，我想這樣做使用原型庫。我正在使用PeriodicalUpdater請求，但它不像我所希望的那樣工作。總之，我試圖定期通過一個AJAX請求發送一個textarea的內容到一個PHP頁面，該頁面將它保存到一個MySQL數據庫中。我做這樣的事情（簡稱代碼）：自動保存表單輸入使用原型和PHP

<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請求？

來源

2009-09-15 Eric

你可以只使用的Ajax.Request在使用setInterval，是這樣的：

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

來源

2009-09-15 10:52:22 robjmills

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

來源

2010-02-10 08:35:33 arbales

只需將您的定期更新程序放在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 
    }); 
});

來源

2010-08-29 09:54:23 iroel

自動保存表單輸入使用原型和PHP

回答

相關問題