PHP如何在用户提交表单时更新文本 - PHP How to update text if a user submits a form

我正试图让用户在文本区域中输入一些内容，一旦用户提交，内容将立即显示在id为"currentMessage"的div内部。这是php文件：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Message Page</title>
		<link rel="stylesheet" href="styles.css" type="text/css"/>
		
		<script type="text/javascript">
			function loadMessage(){
				document.getElementById("currentMessage").innerHTML = "<?php
					$my_file = "msg.txt";
					$handle = fopen($my_file, "r");
					$data = fread($handle, filesize($my_file));
					fclose($handle);
					echo $data;
				?>";
			}
		</script>
		
	</head>
	<body onload="loadMessage();">
		
		<?php include "header.html";?>
		<div>
			<div class="PageTitle">Messaging</div>
			<p class="Paragraph">
				Here you can send a message to the LCD display so that it may be shown when the display
				cycles through its time, temperature and status.
			</p>
			<div class="Paragraph">
				Current Message:<br>
				<p id="currentMessage" class="CodeBlock"></p>
			</div>
			<div class="SubTitle">Enter Your Message:</div>
			<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>" style="clear: left;">
				<textarea cols="32" rows="3" name="msg" maxlength="96" id="msg"></textarea><br>
				<input type="submit" value="Submit Message" name="submit">
			</form>
			<?php
				if (isset($_POST['submit'])){
					$msg = $_POST["msg"];
					$my_file = "msg.txt";
					$handle = fopen($my_file, "w") or die("Cannot open file:  " . $my_file);
					fwrite($handle, $msg);
					fclose($handle);
					echo "<script>
						loadMessage();
					</script>";
				}
			?>
			
		</div>
		
	</body>
	
</html>

目前，我试图将用户提交的内容保存到服务器上的一个文件中，然后运行loadMessage（）并在currentMessagediv中返回结果。然而，这显然不起作用。我也是php的新手，我不知道如何引导echo的输出，或者是否没有办法更具体地说明将输出文本放在哪里。

所以，这个问题是，在保存任何内容之前，您正在加载文件的内容。loadMessage中的php代码在页面加载时立即执行，并且您希望在msg.txt文件保存后执行它。

您可以看到，如果您提交一次文本，然后尝试再次提交一些文本，这是类型的。它将显示您上次提交的内容。

尽管这种整体方法不应该在实际的网站上用于保存信息，然后将其加载回显示，但如果你只是在学习，这应该没有任何问题。

因此，要使用Javascript加载数据，您需要发出AJAX请求。

通常，大多数人使用jQuery在页面加载后执行AJAX请求以加载数据。

但是，为了防止包含整个jQuery库，可以使用vanilla Javascript异步加载msg.txt文件。该站点，http://youmightnotneedjquery.com/#request，提供了许多关于如何在没有jQuery库的情况下实现相同效果的有用片段。

因此，如果您通过Javascript加载数据，以下是您的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Message Page</title>
        <link rel="stylesheet" href="styles.css" type="text/css"/>
        <script type="text/javascript">
            function loadMessage(){
                console.log("Performing AJAX request!");
                var message_element = document.getElementById("currentMessage");
                var request = new XMLHttpRequest();
                // Load our msg.txt file
                request.open('GET', 'msg.txt', true);
                request.onload = function() {
                  if (request.status >= 200 && request.status < 400) {
                    // Success!
                    // Display the text we loaded.
                    resp = request.responseText;
                    message_element.innerHTML = resp;
                  } else {
                    // We reached our target server, but it returned an error
                    message_element.innerHTML = "An error occurred.";
                  }
                };
                request.onerror = function() {
                  // There was a connection error of some sort
                  message_element.innerHTML = "An error occurred.";
                };
                // Send the AJAX request (which displays the data after it has been loaded)
                request.send();
            }
        </script>
    </head>
    <body onload="loadMessage();">
        <?php include "header.html";?>
        <div>
            <div class="PageTitle">Messaging</div>
            <p class="Paragraph">
                Here you can send a message to the LCD display so that it may be shown when the display
                cycles through its time, temperature and status.
            </p>
            <div class="Paragraph">
                Current Message:<br>
                <p id="currentMessage" class="CodeBlock"></p>
            </div>
            <div class="SubTitle">Enter Your Message:</div>
            <form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>" style="clear: left;">
                <textarea cols="32" rows="3" name="msg" maxlength="96" id="msg"></textarea><br>
                <input type="submit" value="Submit Message" name="submit">
            </form>
            <?php
                if (isset($_POST['submit'])){
                    $msg = $_POST["msg"];
                    $my_file = "msg.txt";
                    $handle = fopen($my_file, "w") or die("Cannot open file:  " . $my_file);
                    fwrite($handle, $msg);
                    fclose($handle);
                }
            ?>
        </div>
    </body>
</html>

我认为您遇到的问题是，您正在回显未经评估的javascript。

尝试回显：

<script>
    (function(){
        loadMessage();
    })();
</script>

而不仅仅是

<script>
    loadMessage();
</script>