使用jQuery和PHP自动保存表单数据 [英] autosaving form data with jquery and php
问题描述
我对PHP很满意，但是对jQuery却完全陌生，并且陷入了自动保存表单数据的困境.
I am quite ok with PHP, but a total noob with jQuery, and got stuck with autosaving form data.
在dummy.php中每30秒调用一次autosave函数.我正在将要处理的序列化表单数据(->数据库)发送到savetest.php.
The autosave function gets called every 30 seconds in dummy.php. I'm sending the serialized form data for processing (--> database) to savetest.php.
此刻，我陷入了这个问题:
At this moment, I am stuck with this question:
如何获取savetest.php来监听"传入的数据并对之做出反应?
How do I get savetest.php to 'listen' to incoming data and react to it?
此刻，我收到警报哦，不！" (=不成功)每30秒一次.
At this moment, I get the alert 'Oh no!' ( = no success) every 30 seconds.
这是我缩短的示例代码:
Here's my shortened sample code:
dummy.php，代码段1(HTML和PHP):
dummy.php, snippet 1 (HTML & PHP):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../../_include/jquery-1.9.1.min.js"></script>
</head>
<body>
<h1>My Form</h1>
<form name="form1" id="form1" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<input type="radio" name="item_2_1" id="c_2_1_0" value="0" />
<input type="radio" name="item_2_1" id="c_2_1_1" value="1" />
<input type="radio" name="item_2_1" id="c_2_1_2" value="2" />
<input type="radio" name="item_2_1" id="c_2_1_3" value="3" />
<input type="checkbox" name="item_3_1[]" id="c_3_1_0" value="yes" />
<input type="checkbox" name="item_3_1[]" id="c_3_1_1" value="no" />
<input type="text" name="item_4_1" id="c_4_1_0" />
</form>
dummy.php，代码段2(jQuery):
dummy.php, snippet 2 (jQuery):
<script type="text/javascript">
function autosave() {
jQuery('form').each(function() {
jQuery.ajax({
url: 'savetest.php',
data: {
'autosave' : true,
'formData' : jQuery(this).serialize()},
type: 'POST',
success: function(data){
if(data && data == 'success') {
alert("OK!");
}else{
alert("Oh no!");
}
}// end successful POST function
}); // end jQuery ajax call
}); // end setting up the autosave on every form on the page
}// end function autosave()
jQuery(function($) {
setInterval(autosave, 30 * 1000);
});
</script>
，这是savetest.php:
and this is savetest.php:
if (isset($_POST)) {
var_dump($_POST);
exit();
} else {
echo 'Hi, no $_POST.';
}
不幸的是，仍然没有成功的警报...和savetest.php转储array(0){}:-(
unfortunately, still the unsuccessful alert... and savetest.php dumping array(0){} :-(
推荐答案
if(isset($_POST)):
//processing to save autosave
else:
//the rest of your form code and jQuery stuff
endif;
这将检查数据是否已过帐，//rest of your data应代表该页面生成的所有其他未执行任何处理的代码.
This will check if the data is posted, the //rest of your data should represent All other code generated by the page that does not do any processing.
还可以建议清理该数据属性吗?
Also, may I suggest cleaning up that data attribute?
data: {
'navigation': 'save',
'autosave' : true,
'formData' : jQuery(this).serialize()
}
然后在服务器端，您可以像普通方式一样访问它，$_POST['navigation']和$_POST['formData']包含name=value个组合的数组.
Then on the server side you can access it just like normal, $_POST['navigation'] and $_POST['formData'] contains the array of name=value combinations.
此外，您的函数应位于$(document).ready之内，或类似以下内容:
Moreover, your function should be within $(document).ready, or like the following:
jQuery(function($){
//the rest of your code
});
jQuery(function($)将以$(document).ready运行，并且在该函数内将$符号作为jQuery的别名.
jQuery(function($) will run as $(document).ready and will alias the $ symbol as jQuery while within that function.
这应该涵盖所有基础.
这篇关于使用jQuery和PHP自动保存表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
