保存对文件的更改而不重新加载页面

Save Changes to File Without reloading Page

本文关键字：新加载 加载 文件 保存      更新时间：2023-09-26

现在我有一个HTML文本区域，它从文本文件中获取内容。我想做的是允许用户在文本区域编辑文件，当他们按下按钮时，更改会被推到文件中，而无需重新加载整个页面。

我知道单用javascript是不能做到这一点的，因为它是一种客户端语言，但我想也许可以用AJAX来实现这一点？我没有太多AJAX的经验，所以这可能不起作用。

为了简单起见，我想远离websocket。

下面是我的PHP文本区域代码：

<?php
    $myfile = fopen($file, 'a+');
    echo "<textarea id='demo'>";
    // go through each line in the file, print its contents.
    while(!feof($myfile)) {
          echo fgets($myfile);
    }
          echo "</textarea>";
?>

在不刷新整个页面的情况下，您可以使用jquery ajax更新文本区域。当您在index.php上单击save changes时（在我的示例中），我们通过其id="demo"获得文本区域的值，并将其发送到update.php。在update.php中，我们使用fwrite()清除所有现有文本，并将从textarea获得的新内容写入其中，并像在index.php中那样显示新文本。

这就是index.php:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>TextArea Lesson</title>
             <style>
                 div{
                     margin:0 auto 0;
                     width:400px;
                     height:300px;
                 }
                 #demo{
                     margin-left:5px;
                     width:390px;
                     height:200px;               
                 }
             </style>       
        </head>
        <body>
            <div>
            <form method="POST">
                <fieldset>
                    <legend>Ajax Update Text Area</legend>
        <?php
            $myfile = fopen('test.txt', 'r');
              echo "<textarea id='demo'>";
            // go through each line in the file, print its contents.
            while(!feof($myfile)) {
              echo fgets($myfile);
            }
              echo "</textarea><br>";
        ?>
                    <input type="submit" id="save" value="Save changes" />
                </fieldset>
            </form>
            </div>
        </body>
    </html>
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"
                  integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk="
                  crossorigin="anonymous"></script>
    <script>
    //when you click save changes, we get its id="save"
    //and prevent default submission    
    $(document).on("click", "#save", function(e){   
            e.preventDefault();
            //get the textarea data bu its id="demo"
            var textdata = $('#demo').val();
            mydata= 'testdata='+textdata;
            $.ajax({
                type:'POST',
                data:mydata,
                url:'update.php',
                success:function(data) {                
                    if(data){
                      alert('Saved!');
                      $("#demo").html(data);//load data from update.php
                    }else{
                      alert('Update failed');
                    }
                  }
            });
        });
    </script>

Update.php:

<?php
$data_to_write = $_POST['testdata'];
$file_path = 'test.txt';
$file_handle = fopen($file_path, 'w'); 
fwrite($file_handle, $data_to_write);
fclose($file_handle);
$myfile = fopen('test.txt', 'r');
 while(!feof($myfile)) {
          echo fgets($myfile);
    }
fclose($myfile);
?>

和test.txt:

那只大而敏捷的棕黑色狐狸跳过一只懒狗。

我希望这能对你有所帮助。注意：这只是一个工作代码，仅供学习之用。因此，无法确保安全检查和数据验证。

好吧，你有几个简单的方法。

  1. 你可以有一个隐藏的iframe。当用户点击提交表单时，您会调用一个函数来获取字段的值，并将其发送到隐藏框架中的表单，然后使用JavaScript提交表单
  2. 您可以使用XMLHttpRequest（）；创建一个php页面，接收传递给它的数据。使用XMLHttpRequest（）调用页面；从表单发送数据

方法2更优雅。

相关文章：