Question

我正在尝试为使用$ .ajax（）填充的表找到解决方案，但是当页面加载时内容不会显示。我怎样才能做到这一点？也许我的$.ajax()函数中缺少某些东西？

HTML：

<div class="row">
    <div class="col-md-12 overflow-table">
            <table class="table" id="table">
            <thead class="head-color thead-inverse">
                <tr>
                    <th style="border-top-left-radius: 10px; border-left:1px solid transparent;">NAME</th>
                    <th>CLIENT-ID</th>
                    <th>URL</th>
                    <th style="border-top-right-radius: 10px; border-right:1px solid transparent;">ACTIONS</th>
                </tr>
            </thead>

            <tbody id='table-redirect'>
                <tr class='lightgrey'>
                </tr>
                <tr class='lightgrey'>
                </tr>
                <tr class='lightgrey'>
                </tr>
                <tr class='lightgrey'>
                </tr>
            </tbody>
        </table>
    </div>

$.ajax()函数用于在单击按钮时填充表格

            //save content to the table
        $('#saveButton').on('click', function() {
            var url = "http://mobisteinlp.com/redirect/redirect";
            var name = $('#name').val();
            console.log(name);
            var clientId = $('#clientId').val();
            console.log(clientId);
            var redirectUrl = $('#redirectUrl').val();
            console.log(redirectUrl);
            var formData = new FormData();
            formData.append('name', name);
            formData.append('client_id', clientId);
            formData.append('url', redirectUrl);
            console.log('test')
            $.ajax({
                url: url + "/saveRedirect",
                type: "POST",
                dataType: "json",
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                success: function(obj) {
                    var name, clientId, redirectUrl;
                    var rows = '';
                    for (i = 0; i < obj.length; i++) {
                        rows += "<tr class='lightgrey'><th>" + obj[i].name + "</th><td>" + obj[i].client_id + "</td><td>" + obj[i].url + "</td><td><button type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal" + obj[i].client_id + "'><img class='col-md-2 edit nopad float-right' src='http://mobisteinlp.com/redirect/public/img/edit.svg'></button><div class='modal fade' id='myModal" + obj[i].client_id + "' role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-body'><div class='form-group row'><label for='example-search-input' class='col-2 col-form-label'>&nbsp;Name</label><div class='col-10'><input class='form-control' type='search'  id='name1' name='name1' value='" + obj[i].name + "' required></div></div><div class='form-group row'><label for='example-email-input' class='col-2 col-form-label'>&nbsp;URL</label><div class='col-10'><input class='form-control' type='url' id='url1' name='url1'  value='" + obj[i].url + "' required></div></div><div class='form-group row'><label for='example-url-input' class='col-2 col-form-label'>&nbsp;Client ID</label><div class='col-10'><input class='form-control' type='text' disabled id='client_id1' name='client_id1'  value='" + obj[i].client_id + "'  required></div></div><input type='hidden' value='" + obj[i].id + "' name='hidden' id='hidden'><input type='submit' value='Change' id='change'></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button></div></div></div></div><a href='http://mobisteinlp.com/redirect/public/click.php/?id='" + obj[i].id + "'><img class='col-md-2 link nopad float-right' src='http://mobisteinlp.com/redirect/public/img/copy.svg'></a></td></td></tr>";
                        $("#table").append(rows);
                        console.log('sucess!');
                    }
                },
                error: function() {
                    console.log('error');
                }
            });
        });

Answer 1

当您单击按钮时，将加载数据。

您可以通过以编程方式单击页面加载上的按钮来调用该函数，如下所示：

$(document).ready(function(){
     $('#saveButton').click();
});

方法2

您可以在函数中绑定ajax调用，并在单击按钮时调用该函数，并在页面加载上调用该函数，如下所示：

function loadData()
{
            var url = "http://mobisteinlp.com/redirect/redirect";
            var name = $('#name').val();
            console.log(name);
            var clientId = $('#clientId').val();
            console.log(clientId);
            var redirectUrl = $('#redirectUrl').val();
            console.log(redirectUrl);
            var formData = new FormData();
            formData.append('name', name);
            formData.append('client_id', clientId);
            formData.append('url', redirectUrl);
            console.log('test')
            $.ajax({
                url: url + "/saveRedirect",
                type: "POST",
                dataType: "json",
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                success: function(obj) {
                    var name, clientId, redirectUrl;
                    var rows = '';
                    for (i = 0; i < obj.length; i++) {
                        rows += "<tr class='lightgrey'><th>" + obj[i].name + "</th><td>" + obj[i].client_id + "</td><td>" + obj[i].url + "</td><td><button type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal" + obj[i].client_id + "'><img class='col-md-2 edit nopad float-right' src='http://mobisteinlp.com/redirect/public/img/edit.svg'></button><div class='modal fade' id='myModal" + obj[i].client_id + "' role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-body'><div class='form-group row'><label for='example-search-input' class='col-2 col-form-label'>&nbsp;Name</label><div class='col-10'><input class='form-control' type='search'  id='name1' name='name1' value='" + obj[i].name + "' required></div></div><div class='form-group row'><label for='example-email-input' class='col-2 col-form-label'>&nbsp;URL</label><div class='col-10'><input class='form-control' type='url' id='url1' name='url1'  value='" + obj[i].url + "' required></div></div><div class='form-group row'><label for='example-url-input' class='col-2 col-form-label'>&nbsp;Client ID</label><div class='col-10'><input class='form-control' type='text' disabled id='client_id1' name='client_id1'  value='" + obj[i].client_id + "'  required></div></div><input type='hidden' value='" + obj[i].id + "' name='hidden' id='hidden'><input type='submit' value='Change' id='change'></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button></div></div></div></div><a href='http://mobisteinlp.com/redirect/public/click.php/?id='" + obj[i].id + "'><img class='col-md-2 link nopad float-right' src='http://mobisteinlp.com/redirect/public/img/copy.svg'></a></td></td></tr>";
                        $("#table").append(rows);
                        console.log('sucess!');
                    }
                },
                error: function() {
                    console.log('error');
                }
            });
}

现在为您的按钮点击监听器使用：

$('#saveButton').on('click', loadData);

对于文档加载使用：

$(document).ready(function(){
     loadData();
});

Answer 2

如果你想在页面重新加载时加载数据，请在文档就绪函数中进行ajax调用。如下所示 $（document）.ready（function（）{

// do ajax call

}）;

Answer 3

目前，当用户点击ID为＆＃34; saveButton＆＃34;的元素时，您正在加载数据。

如果您希望在加载页面时加载数据，请执行以下操作：

$(document).ready(function() {
    // your code thats currently wrapped in the
    // $('#saveButton').on('click', function() { block
});

Answer 4

只需添加$（'＃saveButton'）。触发器（'click）; 下面是“$（'＃saveButton'）。on（'click'，function（）”

在页面上显示动态表（重新）加载？

4 个答案: