Print list content with jquery ajax

Question

Print list content with jquery ajax

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have a jquery ajax code that returns me data from a request, but it returns me a line and then erases and plays the next one on top of the previous one, I want it to print on the screen 1 result below 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>functionenviar(){varbin=$("#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

asked by anonymous 08.07.2017 / 02:34

2 answers

1

Placing on the screen always replaces the previous one:

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

Instead you have to add:

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

Assuming the data received is the way you want it to appear.

08.07.2017 / 02:42

javax.servlet.ServletException: java.lang.ExceptionInInitializerErro Save only day and month in DATE field in mysql with php?

score 1 · Accepted Answer

Simple friend, assuming your json (resultado) returns a list with data, you only have to use the each and prepend() function.

<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>"); 
});
}

If your json (resultado) only returns a data and not a list you can remove the each function and use only prepend() .

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