在引导程序中显示 ajax 数据

Question

我有这段代码，用于使用 ajax 查看从数据库中收集的所有数据，它正在工作，但仅当我使用只读输入标签时。有没有办法像在表中那样显示数据(我真的很想要(。

视图边栏

<div id="viewInfo" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="color: green;">
                    <h5 class="modal-title" id=""><strong>Full Details</strong></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" style="color: white;" >&times;</span>
                        </button>
                </div>
                <div class="modal-body" style="font-size: 10px;" >
                    <form>
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-2 col-form-label">Name</label>
                            <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="name2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-2 col-form-label">Email/Username</label>
                            <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="email2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-2 col-form-label">Address</label>
                            <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="address2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-2 col-form-label">Phone Number</label>
                            <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="phone_number2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-2 col-form-label">Household Type</label>
                            <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="type2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-2 col-form-label">Active Status </label>
                            <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="active_status2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-2 col-form-label">Password </label>
                            <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="password2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="staticEmail" class="col-sm-2 col-form-label">Transactions </label>
                            <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
    </div>
</div>

剧本

   $('.view_data').click(function(){
        event.preventDefault();
        var household_id = $(this).attr("id");
        $.ajax({
            url:"{{ route('householdInfo') }}",
            method:"get",
            data:{household_id:household_id},
            dataType:"json",
            success:function(data){
                $('#name2').val(data.firstname);
                $('#address2').val(data.address);
                $('#phone_number2').val(data.phone_number);
                $('#type2').val(data.type);
                $('#email2').val(data.email);
                $('#active_status2').val(data.active_status);
                $('#password2').val(data.password);
                $('#viewInfo2').appendTo('body').modal('show');
                console.log(data);
            }
        });
    });

我想不使用只读的输入标签。非常感谢任何可以帮助我的人。

Answer 1

更改刀片文件

<table>
    <thead>
        <tr>
            <th>Sr no</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

你只需要改变 ajax 的成功函数

success: function(data) {
    $.each(data.results, function(index,val){
        $("tbody").append("<tr><td>"index+"</td><td>"+val.country+"</td></tr>");
    });
},