我如何使用 ajax 将数据加载到 dropdownchange 上的表

Question

$("#sel_gram").change(function(){    var gramid = $(this).val();    $.ajax({        url: 'getBooth-details.php',        type: 'post',        data: {gram:gramid},        dataType: 'json',        success:function(response){            var len = response.length;             for( var i = 0; i<len; i++){                var id = response[i]['id'];                var name = response[i]['name'];                var booth_officer_name = response[i]['booth_officer_name'];                 var booth_officer_contact = response[i]['booth_officer_contact'];                           }        }             });});我想将其添加到我在选择选项下方设计的表格中。我正在正确获取所有数据，但无法在我的表中使用它。这是我要显示数据的表格。<table class="table table-hover p-table">                      <thead>                      <tr>                          <th>Booth Name</th>                          <th>Booth Adhikari</th>                          <th>Contact</th>                          <th>Custom</th>                      </tr>                      </thead>                      <tbody>                      <tr>                          <td class="p-name">                              <h6 id="boothname">Name</h6>                          </td>                          <td class="p-team">                             <h6 id="adhikariname"></h6>                          </td>                          <td>                              <h6 id="adhikaricontact"></h6>                          </td>                          <td>                              <a href="project_details.html" class="btn btn-primary btn-sm"><i class="fa fa-folder"></i> View </a>                              <a href="#" class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> Edit </a>                              <a href="#" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i> Delete </a>                          </td>                      </tr>                      </tbody>                  </table>这是我希望显示我的数据的地方..点击查看我想将用户带到下一页，展位显示我可以显示更多详细信息

Answer 1

您可以+=在某个变量中使用追加每一行，然后.html()在您的<tbody>.

演示代码：

//your response

var response = [{

  "id": "1",

  "name": "Booth First",

  "booth_officer_name": "First Adhikari",

  "booth_officer_contact": "9827198271",

  "gram_parshad_name": "Gram Officer One",

  "gram_parshad_contact": "1231231231",

  "gram_population": "10000",

  "gram_house_count": "106",

  "gram_voters_count": "8922",

  "gram_polling_both_count": "20",

  "zone_selected": "23",

  "sector_selected": "14",

  "panchayat_selected": "9",

  "gram_selected": "6",

  "zone_area": "dongargadh",

  "zone_region": "rural"

}];

var len = response.length;

var data = "";

for (var i = 0; i < len; i++) {

  //appeding each row inside <tr>

  data += '<tr><td class="p-name"><h6 id="boothname">' + response[i]['name'] + '</h6> </td><td class="p-team"> <h6 id="adhikariname">' + response[i]['booth_officer_name'] + '</h6></td> <td><h6 id="adhikaricontact">' + response[i]['booth_officer_contact'] + '</h6></td><td><a href="project_details.html" class="btn btn-primary btn-sm"><i class="fa fa-folder"></i> View </a><a href="#" class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> Edit </a><a href="#" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i> Delete </a> </td></tr>';

}

//appending data inside table <tbody>

$("#data").html(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-hover p-table" border="1">

  <thead>

    <tr>

      <th>Booth Name</th>

      <th>Booth Adhikari</th>

      <th>Contact</th>

      <th>Custom</th>

    </tr>

  </thead>

  <tbody id="data">

    <!--data will come here-->

  </tbody>

</table>