Printar content in list format with jquery ajax

Asked

Viewed 529 times

1

I have a jquery ajax code that returns data from a request, but it returns me a line and then erases and throws the next one on top of the Anteriror, I want it to print me on screen 1 result under another as a list, how can I do this ?

<html>
<head>
<title> chk </title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
  function enviar(){
    var bin = $("#bin_id").val();
    var linhaenviar = bin.split("\n");
    var index = 0;
    linhaenviar.forEach(function(value){

      setTimeout(

        function(){
          $.ajax({
            url: 'envio.php',
            type: 'POST',
            dataType: 'html',
            data: "bin=" + value,
            success: function(resultado){
             $('#oi').html(resultado + "<br>");
          }
        })

      }, 10 * index);

    index = index + 1;

    })
  }
  </script>

</head>
<body>
<center>
<textarea name="bin" id="bin_id" rows="10" cols="40">
</textarea>
<br>
<input type="button" value="testar" onclick="enviar();"></input>
<br>
<div id="oi" name="oi">
<p></p>
</div>
</center>
</body>
</html>

php javascript jquery ajax

  • Could show as the variable outworking is ? that is, how json is formulated

2 answers

1

Its placement on the screen always replaces the previous one:

$('#oi').html(resultado + "<br>");

You have to add instead:

$('#oi').html($('#oi').html() + resultado + "<br>");

Assuming the data received is as it is intended to be.

  • You saved my life thanks until I finally finished my checking system :)

  • @Brunolazarine No problem. A suggestion if the envio.php it is yours, better to send the data all at once and process on the server side with php, not to make several unnecessary ajax requests.

  • And that my textarea has a list of proxys and it is necessary to run a Curl call to test line by line and print on the screen so I used jquery ajax to loop the code and return the results

1


Simple friend, assuming your json (resultado) return a list with data, just use the function each and the prepend().

<textarea name="bin" id="bin_id" rows="10" cols="40">
</textarea>
<br>
<ul id="lista">
</ul>

Js:

success: function(resultado){
resultado.each(function(){
$("#lista").prepend("<li>" + resultado.dado + "</li>"); 
});
}

Should your json (resultado) only return a given and not a list you can remove the function each and use only the prepend().

success: function(resultado){
      $("#lista").prepend("<li>" + resultado.dado + "</li>"); 
}

Browser other questions tagged php javascript jquery ajax

You are not signed in. Login or sign up in order to post.