我如何使用 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 responsevar response = [{&nbsp; "id": "1",&nbsp; "name": "Booth First",&nbsp; "booth_officer_name": "First Adhikari",&nbsp; "booth_officer_contact": "9827198271",&nbsp; "gram_parshad_name": "Gram Officer One",&nbsp; "gram_parshad_contact": "1231231231",&nbsp; "gram_population": "10000",&nbsp; "gram_house_count": "106",&nbsp; "gram_voters_count": "8922",&nbsp; "gram_polling_both_count": "20",&nbsp; "zone_selected": "23",&nbsp; "sector_selected": "14",&nbsp; "panchayat_selected": "9",&nbsp; "gram_selected": "6",&nbsp; "zone_area": "dongargadh",&nbsp; "zone_region": "rural"}];var len = response.length;var data = "";for (var i = 0; i < len; i++) {&nbsp; //appeding each row inside <tr>&nbsp; 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">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Booth Name</th>&nbsp; &nbsp; &nbsp; <th>Booth Adhikari</th>&nbsp; &nbsp; &nbsp; <th>Contact</th>&nbsp; &nbsp; &nbsp; <th>Custom</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody id="data">&nbsp; &nbsp; <!--data will come here-->&nbsp; </tbody></table>