PHP如何在用戶提交表單時更新文本

Question

我正在嘗試使其成為用戶在文本區域中輸入內容，並在用戶提交內容后立即將其內容顯示在其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（）並在currentMessage div中回顯結果。 但是，這顯然不起作用。 我也是php的新手，我不確定如何定向echo的輸出，或者不確定是否要更具體地放置輸出文本。

Answer 1

因此，問題在於，在將文件保存任何內容之前，您正在加載文件的內容。 loadMessage的php代碼會在頁面加載后立即執行，您想在保存msg.txt文件后執行它。

您可以看到，如果您一次提交一些文本，然后嘗試再次提交一些文本，這是可行的 。 它會顯示您上次提交的內容。

盡管不應在實際的網站上使用這種整體方法來保存信息，然后再將其加載回顯示，但是，如果您只是在學習，則應該沒有任何問題。

因此，要使用Javascript加載數據，您需要發出AJAX請求。

通常，大多數人在頁面加載后使用jQuery執行AJAX請求以加載數據。

但是，為防止您包含整個jQuery庫，可以使用msg.txt Javascript異步加載msg.txt文件。 這個站點http://youmightnotneedjquery.com/#request上有許多有用的摘錄，介紹了如何在沒有jQuery庫的情況下實現相同的效果。

因此，如果您是通過Java腳本加載數據的，則代碼如下：

<!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>

Answer 2

我認為您遇到的問題是，您正在回顯未得到評估的javascript。

嘗試回顯：

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

而不只是

<script>
    loadMessage();
</script>

純JavaScript等效於jQuery的$ .ready（）如何在頁面/ dom准備就緒時調用函數

PHP如何在用戶提交表單時更新文本

問題描述

2 個解決方案

解決方案1
1 已采納 2015-12-23 15:30:00

解決方案2
0 2015-12-23 15:44:33

PHP如何在用戶提交表單時更新文本

問題描述

2 個解決方案

解決方案1 1 已采納 2015-12-23 15:30:00

解決方案2 0 2015-12-23 15:44:33

解決方案1
1 已采納 2015-12-23 15:30:00

解決方案2
0 2015-12-23 15:44:33