讀取/寫入文本文件而不刷新頁面

我寫了一個小小的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>

來源

2016-01-05 learner123

如果您正在使用相同的頁面進行處理：爲避免你不得不防默認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; 
} 
...

來源

2016-01-05 12:05:13 RomanPerekhrest

@ learner123，請注意，在外部資源（代碼共享，jsfiddle）上使用'window.location.href'進行測試可能無法按預期進行。在本地網絡服務器上試用 – RomanPerekhrest

我在本地服務器上測試過它，但是我忘記調用jQuery文件，並且我沒有替換H1內容。這就是爲什麼它第一次不起作用。 – learner123

你爲什麼不使用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(); 
}

來源

2016-01-05 11:43:55 smoqadam

嗨，你能解釋一下你的代碼嗎？我不明白你的第一個劇本。 – learner123

再次檢查。 – smoqadam

感謝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>

來源

2016-01-05 12:52:07 learner123

請在我的帖子中閱讀我的最新評論 – RomanPerekhrest

讀取/寫入文本文件而不刷新頁面

回答

相關問題