使用php &Jquery将数据从文本框发送到文本(csv)文件,并通过读取同一网页上的不同文本框来验证这一点


Using php & jquery to post data from textboxes to text (csv) file and verify this by reading back to different textboxes on same webpage

非常简单,作为浏览器风格的UI,我试图在两个文本框中读取两个参数(由用户提供),将它们保存在服务器上的纯文本文件(特别是csv,但这并不重要)中,但不停止在那里,以确保这些已正确保存,并作为反馈给用户,我想从文件中读取新保存的参数返回到同一页面上的其他两个文本框。

当页面加载时,jquery成功地用php从服务器csv文件中读取的值填充"当前保存的设置"文本框。当我输入新值,然后单击[submit]按钮保存这些值时,服务器文件就成功更新了。

这是问题出现的下一步,我可以使用php从服务器文件中读取新存储的值,并"警告"它们以检查它们是否正确,但更新"当前保存的设置"的jquery行不会更新。我必须刷新网页,让这些文本框更新。我应该说,"警报"显示正确的(新保存的)值,所以一切到那一点工作良好,只是以下两行jquery工作在页面加载似乎没有得到执行在这一点。

希望我在这里遗漏了一些非常简单的东西。

(csv文件本身只是由一个完全独立且不相关的软件使用的两个参数。)

非常感谢你的帮助。

php文件如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>System Settings</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>

<?php
    $SystemSettings = explode(",",file_get_contents('Data/Settings.csv'));        
?>
<script type="text/javascript">
    $(document).ready(function () {                       
        $("#txtStoredParam1").val("<?php echo $SystemSettings[0] ?>");
        $("#txtStoredParam2").val("<?php echo $SystemSettings[1] ?>");
        $("#btnSaveSettings").button();
    });             
</script>
</head>
<body>
<?php
if(isset($_POST['submit'])) 
{
    $File = "Data/Settings.csv"; 
    $Handle = fopen($File, 'w');
    $Data = $_POST['Param1'] . "," . $_POST['Param2']; 
    fwrite($Handle, $Data);
    fclose($Handle);
    $SystemSettings = explode(",",file_get_contents('Data/Settings.csv'));
?>
    <script>
       // alert("<?php echo $SystemSettings[0] ?>");
       // alert("<?php echo $SystemSettings[1] ?>");
         $("#txtStoredParam1").val("<?php echo $SystemSettings[0] ?>");
         $("#txtStoredParam2").val("<?php echo $SystemSettings[1] ?>");
    </script>
<?php
}
?>

<form id="Form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="SettingsForm" target="iFormResponse">
<h2>Parameter 1:</h2>
<input id="txtParam1" type="text" name="Param1" />
<h2>Parameter 2:</h2>
<input id="txtParam2" type="text" name="Param2" />
<p>&nbsp;</p>
<p><input id="btnSaveSettings" type="submit" value="Save Settings" name="submit" /></p>
<p>&nbsp;</p>
<h3> Currently Saved Settings: </h3>
<p> <label id="lblParam1">Parameter 1: </label><input id="txtStoredParam1" type="text" name="StoredParam1" />
<label id="lblParam2">Parameter 2: </label><input id="txtStoredParam2" type="text" name="StoredParam2" /></p>
</form>
<iframe name="iFormResponse" width="300" height="200" Style="display:none;"></iframe>
</body>
</html>

第一个脚本块使用了$(document).ready(),而第二个脚本块没有使用。因此,第二个块首先运行,并被第二个块覆盖。

删除第二个块,并将第一个块的代码移动到页面的末尾,这样在两种情况下您只有一个脚本块可以重用。

但是既然您使用的是表单和PHP,为什么不直接设置输入的值呢?

<input id="txtParam2" type="text" name="Param2" value="<?php echo $systemSettings[0];?>" />