javascript - 处理多个 ajax 响应

Question

首先我想描述一下我想做什么。

我有一个表格，其中一列有按钮。每个按钮代表一个 ID。单击按钮时，我将 ID 存储到 JavaScript 中的变量中。我想在 MySQL 语句中使用此 ID 来获取一些信息，这些信息位于不止一行中，并使用这些数据创建一个 PDF 文件。

我想使用ajax来处理接收到的数据，但我不知 Prop 体该怎么做。

到目前为止，这就是我得到的:

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

来自 get_data.php 的 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);
?>            

这只是我想要做的事情的一般示例，而不是原始代码。所以我想要的是将我从 get_data.php 获得的响应(在大多数情况下超过一行)保存到数组中。

希望您明白我的意思，如果不明白请随时询问。

Answer 1

当显示的代码不是实际代码时很难回答，但通常您可以尝试这样的事情。

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