Question

现在我有一个HTML textarea从文本文件中获取其内容。我希望能够做的是允许用户在textarea中编辑文件，当他们按下按钮时，更改将被推送到文件而无需重新加载整个页面。

我知道这不能单独使用javascript，因为它是一种客户端语言，但我认为这可能是以某种方式用AJAX完成的？我对AJAX没有多少经验，所以这可能行不通。

我想远离websockets，为了简单起见我必须做的事情。

下面是我的PHP textarea代码：

<?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>";
?>

Answer 1

嗯，你有几种简单的方法可以做到。

您可以拥有隐藏的iframe。当用户点击提交表单时，您调用一个功能，该功能会将您的字段值发送到隐藏框架中的表单，然后使用JavaScript提交表单。
您可以使用XMLHttpRequest（）; 创建一个获取传递给它的数据的php页面。使用XMLHttpRequest（）调用页面;从表单发送数据。

方法2更优雅。

Answer 2

如果不刷新整个页面，您可以使用jquery ajax更新textarea。单击index.php上的save changes（在我的示例中），我们通过id="demo"获取textarea的值并将其发送到update.php。在update.php中，我们使用fwrite()清除所有现有文字，并将我们从textarea获取的新内容写入其中，并像在index.php中一样显示新文字。< / p>

所以这是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：

大快速的棕色黑狐狸跳过一只懒狗。

我希望这对你有帮助。注意：这只是一个有效的代码，仅用于学习目的。因此无法确保安全检查和数据验证。

将更改保存到文件而不重新加载页面

2 个答案: