Question

我写了一个小的PHP脚本来读/写一个文本文件，我的脚本运行良好，但我不会在提交时刷新页面。我知道php和jQuery但我从未使用过Ajax。我在网上尝试了一些脚本，但是我找不到我需要的东西，即使我发现这个脚本读取了该文件。

<script type="text/javascript">
jQuery.get('line1.txt', function(data) {
   $('h1').html(data);
});
</script>

所以我的问题是如何使用php / jquery / ajax读取/写入文件，以便不刷新页面。

我的网页代码

<?php
$myfile = fopen("line1.txt", "a+") or die("Unable to open file!");
$number = (int) fgets($myfile);
if (isset($_POST["number"])) {
    $number = $number+1;
    $myfile = fopen("line1.txt", "w") or die("Unable to open file!");
    fwrite($myfile, $number);
}

?>
<html>
<head>

    <title>LINE 1</title>
</head>
<body>
    <div class="container">
            <h1><?= $number; ?></h1>

        <form method="POST">
            <input type="hidden" id="number" name="number" value = "<?= $number; ?>">
            <input type="submit" value = "SUIVANT >>" id="next" name="next"  class="btn btn-lg btn-primary btn-block">
        </form>
    </div>
</body>
</html>

Answer 1

如果您正在处理同一页面：要避免当前刷新页面，您必须阻止默认submit事件触发 js部分：

<script type="text/javascript">
$(document).ready(function(){
   $('input:submit').click(function(e){
      e.preventDefault();
      $.post(window.location.href, {'number': $("input#number").val()}, function(data) {
         if(data) $("input#number").val(data); 
      });
      return false; // just in case if e.preventDefault() fails
   });

});

</script>

修改了php部分：

...
if (isset($_POST["number"])) {
    $number = $number+1;
    $myfile = fopen("line1.txt", "w") or die("Unable to open file!");
    fwrite($myfile, $number);
    echo $number;
    return;
}
...

Answer 2

为什么不使用file_get_contents和file_put_contents？

在客户端：

// First see : https://api.jquery.com/jquery.get/
// send GET request to server 
// parameters send to server will be data that equals to your input value
// then when server response function will be executed.   
$.get('write.php',{data : $('#number').val()},function(result){
   if(result=='ok'){
      alert('write done!')
   }
})

并在write.php中：

<?php 

if(isset($_GET['data'])){
   // append text to line1.txt file!!!
   file_put_contents('line1.txt',$_GET['data'],FILE_APPEND);
   echo 'ok';
   exit();
}

Answer 3

感谢RomanPerekhrest，我修改了他的代码，以我需要的方式工作。我想分享完整的代码：

<?php
$myfile = fopen("line1.txt", "a+") or die("Unable to open file!");
$number = (int) fgets($myfile);
if (isset($_POST["number"])) {
    $number = $number+1;
    $myfile = fopen("line1.txt", "w") or die("Unable to open file!");
    fwrite($myfile, $number);
    echo $number;
    return;
}

?>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
           $('input:submit').click(function(e){
              e.preventDefault();
              $.post(window.location, {'number': $("input#number").val()}, function(data) {
                 if(data) $("input#number").val(data); 
                 $('h1').html(data);
              });
              return false; // just in case if e.preventDefault() fails
           });

        });

        </script>
        <title>LINE 1</title>
    </head>
    <body>
        <div class="container">
                <h1><?= $number; ?></h1>

            <form method="POST">
                <input type="hidden" id="number" name="number" value = "<?= $number; ?>">
                <input type="submit" value = "SUIVANT >>" id="next" name="next"  class="btn btn-lg btn-primary btn-block">
            </form>
        </div>
    </body>
</html>

无需刷新页面即可读/写文本文件

3 个答案: