J'ai écrit un petit script php pour lire / écrire un fichier texte, mon script fonctionne bien, mais je ne vais pas rafraîchir la page lors de la soumission.Je connais php et jQuery mais je n'ai jamais utilisé Ajax. J'ai essayé des scripts sur le Web mais je n'ai pas trouvé ce dont j'avais besoin, même si j'ai trouvé ce script qui lit le fichier.

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

Donc ma question comment lire / écrire un fichier en utilisant php / jquery / ajax afin de ne pas rafraîchir la page.

Le code de ma page

<?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>
0
learner123 5 janv. 2016 à 14:35

3 réponses

Meilleure réponse

Si vous avez affaire à la même page: Pour éviter l'actualisation de la page actuelle, vous devez empêcher le déclenchement d'événement submit par défaut.
js partie:

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

Partie php modifiée:

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

Pourquoi n'utilisez-vous pas file_get_contents et file_put_contents?

Côté client:

// 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!')
   }
})

Et dans 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();
}
0
Saeed M. 5 janv. 2016 à 11:56

Grâce à RomanPerekhrest, j'ai modifié son code pour qu'il fonctionne comme je le souhaite. Je voulais partager le code complet:

<?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>
0
Community 23 mai 2017 à 12:31