处理多个ajax响应

Question

First I want to describe what I want to do.

I've a table and one column has buttons. Each button represents an ID. When the button is clicked, I store the ID into a variable in javascript. I want to use this ID in a MySQL-Statement to get some informations, which are in more than one row and creare a PDF file with these data.

I want to use ajax to handle the recived data, but I don't know exactly how to.

Until now, this is what I got:

<script>
  $("#grid-table").bootgrid({        
      formatters: {
        "buttonID": function(column, row){
          return  "<button type=\"button\" id=\"edit\" class=\"btn btn-xs btn-default print-pdf\" +  data-row-id1=\"" + row.ID + "\" ><span class=\"fa fa-file-pdf-o\"></span></button> ";
        }
    }).on("click", function(e){                
      var id = $(this).data("row-id1");   // id is a string
      var recv_data1[];
      var recv_data2[];
      var recv_data3[];
      var recv_data4[];
      var i = 0;

      if(id != ""){
        xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function(){
          if (this.readyState == 4 && this.status == 200) {
            // how to get all datas and store them here?
            // and get the count of $i

            var doc = new jsPDF();      // pdf object        
            mainPage(doc);              // my function to create a pdf background

            var xPos = 25;
            var yPos = 60;

            while(i){
              doc.setFontSize(12);
              doc.setFontType('normal');           
              doc.text(70, 55, recv_data1[i]);     // here I want to use some of the data

              doc.setFontSize(11);
              doc.setFontType('bold');
              doc.text(xPos+10,  yPos+10, recv_data2[i]);  // some more data I got from the mysql-statement
              doc.text(xPos+55,  yPos+10, recv_data3[i]);
              doc.text(xPos+80,  yPos+10, recv_data4[i]);

              i--;
            }

            doc.save(recv_data1 + '.pdf'); // save pdf file
          }
        };
        xmlhttp.open("GET","get_data.php?id="+ id, true);
        xmlhttp.send();
      }        
  });
</script>

PHP-Part from get_data.php:

<?php  
  include "dbconnect.php";      

  $revc_id = htmlspecialchars_decode($_GET['id']);

  $result = mysqli_query($db, "SELECT     *
                              FROM        table
                              WHERE       table.id = 'revc_id';");

  $i = 1;
  while($row = mysqli_fetch_array($result)) {
    // how to handle the fetched array and alle the data to 
    // more than one variable for the js like 
    // echo $row['name']    for recv_data1[]
    // echo $row['city']    for recv_data2[]
    // echo $row['street']  for recv_data3[]
    // echo $row['country'] for recv_data4[]
    // echo $i              to know how many datas are in there
    $i++;
  }

  mysqli_close($db);
?>            

This is just a general example of what I want to do and not the original code. So what I want is that the respone I got from get_data.php, which is in the most cases more than one row, to be saved into the array.

I hope you know what I mean, if not fell free to ask please.

Answer 1

Tricky to answer when the code shown is not the actual code but in general you could try something like this.

php
---

$data=array();
while( $row = mysqli_fetch_object( $result ) ) {
    $data[]=array(
        'name'      =>  $row->name,
        'city'      =>  $row->city,
        'street'    =>  $row->street,
        'country'   =>  $row->country
    );
}
echo json_encode( $data );



/* javascript */

document.getElementById('BTTN_ID_ETC').onclick = function(e){
    e.preventDefault();

    var id = $( this ).data("row-id1");

    if( id != "" ){
      xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function(){
        if( this.readyState == 4 && this.status == 200 ) {

            var json=JSON.parse( this.response );

            var doc = new jsPDF();
            mainPage( doc );
            var xPos = 25;
            var yPos = 60;

            for( var n in json ){
                try{
                    var obj=json[ n ];

                    if( typeof( obj )=='object' ){
                        var name=obj.hasOwnProperty('name') ? obj.name : false;
                        var city=obj.hasOwnProperty('city') ? obj.city : false;
                        var street=obj.hasOwnProperty('street') ? obj.street : false;
                        var country=obj.hasOwnProperty('country') ? obj.country : false;

                        if( name && city && street && country ){
                            doc.setFontSize(12);
                            doc.setFontType('normal');

                            doc.text(70, 55, name );

                            doc.setFontSize(11);
                            doc.setFontType('bold');                

                            doc.text(xPos+10,  yPos+10, city );
                            doc.text(xPos+55,  yPos+10, street );
                            doc.text(xPos+80,  yPos+10, country );
                        }
                    }
                } catch( err ){
                    console.log( err );
                    continue;
                }
            }

            doc.save( json[0].name + '.pdf');
        }
      };
      xmlhttp.open( 'GET', 'get_data.php?id='+ id, true );
      xmlhttp.send();
    }        
};