Question

您好，我尝试使用ajax帖子从数据库获取数据，但我没有正确获取任何数据。第一列数据夹在另一列中（成员名称出现在图像字段和信息字段中）。图片也分享了，请检查一下。而且，在使用Ajax提取数据时，数据表不起作用。帮我解决这个问题...

感谢与问候

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

这是test_data.php代码

  <?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);
    ?>

Answer 1

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

        }
    }

Answer 2

您必须将JSON数据解析到第一个脚本中。在用json_encode发布ajax的结果中，我发现缺少

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

输入代码

$.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);

谢谢！

如何使用ajax发布和数据表附加数据不起作用？

2 个答案: