如何使用ajax帖子和数据表附加数据不起作用？

问题描述：

Hello there am trying to get the data from database using ajax posts but i didn't get any data properly. first column data is splinting in another columns(Member names are coming in image field and info field). Image also shared please check that. And also datatables are not working while fetching the data using Ajax. Help me out from this problem...

Thanks & Regards

<body>
      <label>Party</label>  
      <select id='partydropdown' name='partydropdown' onchange="partyFunction();">
      <option>--select a party--</option>
        <?php
            if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
        ?>
        <option value="<?php echo $row["Id"];?>"> 
            <?php echo $row["PartyName"];?>
        </option>
        <?php }}?>  
    </select>
    <div id="showhide"></div>   
    </body>
    <script type="text/javascript">
    function partyFunction(){
    debugger;
     $("#showhide").empty();
     $("#showhide").html('');
     $("#showhide").append("<table class='table table-bordered text-center table-responsive' border='1px' id='example'>"+
        "<tr>"+  
        "<th>PartyMemberName</th>"+
        "<th>Image</th>"+
        "<th>Info</th>"+
        "</tr>"+
        "<tbody id='partyBody'>"+
         "</tbody>"+
        "</table>"
        );
    $postdata = {};
    $postdata["Id"]=$("#partydropdown").val();
    console.log($("#partydropdown").val());
    $.post('test_data.php',$postdata,function (data) {
        debugger;
        console.log(data);
        console.log(data["data"][0].candiateName);
     $("#partyBody").empty();
     $("#partyBody").html('');
     console.log(data["data"]);
     console.log(data["data"].length);
      for(var i=0; i<data["data"].length; i++){
      if(data["data"][i].candiateName != null){ 
      $("#partyBody").append("<tr>"+
              "<td id='resdata"+i+"'></td>"+
              "<td id='resdata1"+i+"' ></td>"+
              "<td id='resdata2"+i+"'></td>"+             
          "</tr>");
           $("#resdata"+i).text(data["data"][i].candiateName);
          $("#resdata1"+i).append("<img id='photo"+i+"'>");
          $("#resdata2"+i).text(data["data"][i].Background);         
          $("#photo"+i).attr('src', 'http://aptsvotes.com/wp-content/themes/apts2019/img'+data["data"][i].Photo );        
        }
    }
    });
    };
    </script>

here is the test_data.php code

  <?php
    include_once "conn.php";
    include_once "voterdbclass.php";
    session_start();
    $tbl_name2="Parties";
    $dbObj = new Database1();
    $values1 = array("all");
    $querys = "SELECT c1.CandidateName,c1.Photo,c1.Background ,c1.Type FROM aptsv1_votes.Parties p1 LEFT JOIN aptsv1_votes.Candidates c1 ON c1.CurrentPartyId = p1.Id where p1.Id ='" . $_POST['Id'] . "' limit 21";
    $res = $dbObj->SelectRecord($tbl_name2,$values1,"","$querys");
    $data=array();
    $i=0;
    while ($rs = $res->fetch_array(MYSQLI_ASSOC)) { 
      $data[$i]['candiateName']=$rs['CandidateName'];
      $data[$i]['Photo']=$rs['Photo'];
      $data[$i]['Background']=$rs['Background'];
      $i++;
    }
    $json_array= array(
    "data" =>$data
    );
    echo json_encode($json_array);
    ?>

答

for(var i=0; i<data["data"].length; i++){
      if(data["data"][i].candiateName != null){ 
          var imge = data["data"][i].Photo;
          var name = data["data"][i].candiateName;
          var bg = data["data"][i].Background;
      $("#partyBody").append("<tr>"+
          "<td id='resdata" + i + "'>" + name+"</td>"+
          "<td id='resdata1" + i + "' ><img id= 'photo" + i + "' src='http://aptsvotes.com/wp-content/themes/apts2019/img'" + imge+"></td>"+
          "<td id='resdata2" + i + "'>" + bg+"</td>"+             
          "</tr>");

        }
    }

答

You have to parse JSON data into the first script. While ajax result you posting with json_encode, I found missing

var data = $.parseJSON(data);
console.log(data["data"].length);

into code

$.post('test_data.php',$postdata,function (data) {
 // debugger;
console.log(data);
var data = $.parseJSON(data);  // Add this line in your code and verify
console.log(data["data"].length);

Thank you!

如何使用ajax帖子和数据表附加数据不起作用？

相关推荐