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

我试图为一个填充了$.ajax（）的表找到一个解决方案，但是当页面加载时内容不会显示。我该怎么做？我的

$.ajax（）函数

可能缺少什么

HTML:

---

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

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

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

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');
                }
            });
}

方法2

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

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

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');
                }
            });
}

对于文件加载使用：

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

---

当前，当用户单击id为“saveButton”的元素时，您正在加载数据

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

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

只需添加$（'#saveButton'）。触发器（'click'）；

---

下面的“$”（“#saveButton”）。如果要在页面重新加载时加载数据，请单击（'click'，function（）”

。在document ready函数中执行ajax调用。如下所示 $（文档）.ready（函数（）{

---

})

差不多了！我仍然有一个错误：uncaughttypeerror:无法读取null的属性'length'，如果我

console.log（obj）

返回

null

also@Timmy您从服务器回显的是什么？即响应是什么？我不知道这是否有帮助，但我有输入来向表中插入数据，并且当$.ajax（）在单击按钮时被触发，并且这些输入为空。@Timmy AJAX请求的实际结果是什么？在该请求上运行以下for循环？

for（i=0；i

obj是数组吗？因为

.length

对数组有效是的，obj是数组，但结果是错误的。我后来发现你的答案是我代码中缺少的部分。谢谢！：）@Timmy is这个答案和我的不同吗？

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

// do ajax call