Question

我的html上有2个表，我想填写将通过PHP在mySQL服务器上获取的数据。请原谅我，如果我没有意义，相对较新的网站

我已在.js

中声明了我的外部html <body>文件

<script src="../bower_components/accounts/accounts.js"></script>
<script src="../bower_components/accounts/userinfoRetrieval.js"></script>

从我的js文件中可以看到，在加载html页面时会自动调用这些函数。

我想有数据冲突，因为我同时从2个php文件中获取数据。因此我的表值未正确显示。如何在页面加载时获取数据并显示它们？

account.js

var tableContents;
var recipients =  new Array();
getRecipients();

function getRecipients() { //get account related info
        $.ajax({
            type: "GET",
            url: "../bower_components/accounts/accounts.php",
            dataType: "json",
            data: {
                json: JSON.stringify(recipients),
            },
            success: function(response){
                recipients = response;
                printData(recipients);
            }
        });
}

function printData(recipients){
    var x = "0";

    for(var i in recipients){
        if (i%2 == 0){
            tableContents = $("<tr class=\"even gradeC\">");
            jQuery('#accountsBody').append(tableContents);

        }
        else{
            tableContents = $("<tr class=\"odd gradeX\">");
            jQuery('#accountsBody').append(tableContents);
        }
        tableContents.append($("<td style=\"padding-left:18px\"><input name=\"select\" type=\"checkbox\" value=\""+ i + "\"></td>"));
        tableContents.append($("<td style=\"padding-left:18px\">" + recipients[i].recipientId + "</td>"));
        tableContents.append($("<td style=\"padding-left:18px\">" + recipients[i].username + "</td>"));
        tableContents.append($("<td style=\"padding-left:18px\">" + recipients[i].email + "</td>"));
        tableContents.append($("<td style=\"padding-left:18px\">" + recipients[i].phoneNo + "</td>"));

        if (recipients[i].status === x){
            tableContents.append($("<td style=\"padding-left:18px\">Unapproved</td>"));
        }
        else{
            tableContents.append($("<td style=\"padding-left:18px\">Approved</td>"));
        }
        tableContents.append($("</tr>"));
    }
    sorting();
}

userinfoRetrieval.js

var tableContents;
var userInfo =  new Array();

getuserInfo();


function getuserInfo() { //get account related info
        $.ajax({
            type: "GET",
            url: "../bower_components/accounts/userinfoRetrieval.php",
            dataType: "json",
            data: {
                json: JSON.stringify(userInfo),
            },
            success: function(response){
                userInfo = response;
                printData(userInfo);
            }
        });

}

function printData(userInfo){
    tableContents = $("<tr>");
    jQuery('#userinfoBody').append(tableContents);

    tableContents.append($("<td>" + userInfo[0].userID + "</td>"));
    tableContents.append($("<td>" + userInfo[0].username + "</td>"));
    tableContents.append($("<td>" + userInfo[0].email + "</td>"));
    tableContents.append($("<td>" + userInfo[0].dob + "</td>"));
    tableContents.append($("<td>" + userInfo[0].phoneNo + "</td>"));

    tableContents.append($("</tr>"));
}

第一行（以利亚）应放在顶部桌子上，而不是当前错误放置的那一行。因此存在未定义的值

Answer 1

我担心printData在全局范围内被声明两次，尝试重命名它们以避免命名冲突。

我建议使用IIFE并使用strict以避免错误地污染全局命名空间。

IIFE： https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

使用严格： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

同时获取2个ajax数据

1 个答案: