从MySQL DATABASE创建JavaScript对象（即多个表）

时间：2014-08-07 02:32:19

标签： javascript php mysql ajax json

很抱歉在混音中添加另一个JavaScript对象。我只是有点麻烦地缠绕着这个，因为它比我曾经处理的要复杂一点。

与标题状态一样，我正在尝试创建JavaScript对象或者可能是MySQL数据库的多维数组。出于测试目的，我只使用数据库中的三个表，即使它最终会存储数十个表。这些表称为“接口”，“IPAM”和“DNSF”。

我想完成此任务的原因是，我正在尝试创建一个重量级的ajax页面，它动态地知道何时添加，更新，删除表等，并自动反映这一点而无需添加更多代码。我这样做是通过用PHP编写javascript 以及其他各种其他ajax回调吐出html和变量。

让我先从我的硬编码HTML开始。所有其他html都是动态创建的。这也将很快动态创建，以便在不添加代码的情况下向我的网站添加按钮。

<body>
<div class = "form">
        <button type="button" class = "formbutton" value = "Interfaces" onclick="inputChoice('Interfaces')">Interfaces</button>
        <button type="button" class = "formbutton" value = "IPAM" onclick="inputChoice('IPAM')">IPAM</button>
        <button type="button" class = "formbutton" value = "DNSR" onclick="inputChoice('DNSR')">DNSR</button>           
    </div>
    <div class = "tableDiv" id="myTableDiv" style="height:1000px;width:1000px;border:1px solid #ccc; overflow: scroll;"><table id = "myTable"></table></div>    
</body>

在执行任何按钮或事件之前，我的页面的第一个问题是在$( document ).ready(function() {函数内发出ajax请求。我的问题是我必须为每个表编写一个单独的ajax请求。我将在这里展示一个示例，其中我获取接口表数据：

$.ajax({
    url:"/ryan/nonEmber/ajax.php?table=Interfaces",
    beforeSend: function(XMLHttpRequest){},
    success: function(data, textStatus) {
        InterfacesCols = data.split(" ");
        InterfacesCols.pop();
        $.getJSON("/ryan/nonEmber/getJson.php?table=Interfaces", function( data ){
            var items = [];
            $.each(data.post, function(key, val){
                items.push(val);
            });
            for(i = 0; i < items.length; i++){
                var myString = '<tr id = "visibleRow">';
                for(j = 0; j < InterfacesCols.length; j++){
                    if(InterfacesCols[j] != null){
                        myString = myString + '<td id = "visibleDef">' + items[i][InterfacesCols[j]] +'</td>';
                    }
                }
                myString = myString + '</tr>';
                Interfaces.push(myString);
            }
        });
    }
});

此ajax请求最终会创建一个用于创建表的html字符串数组。 Interfaces []包含每个html行。 InterfacesCols包含每列的名称。我必须为每个表编写这段代码。

我想要做的是把我的“Interfaces []”像数组一样，将“InterfacesCols []”放在主数组中，这样我就可以创建一个模板而不需要大量相同的代码。 /强>

让我们调用这个主数组表。这将允许我将我的ajax放入for循环并循环遍历每个表数组而不是硬编码。

tables [0]将是interfaces []，tables [1]将是ipam等。

除了我的ajax请求块之外，我最初从数据库中收集数据。我也有我的函数“inputChoice（string）”，其中我实际上从这个数据生成一个表。我这样做是通过改变我的表格的内部html来实现的。我不想重定向我的页面。这工作正常，但我必须再次为每个表创建一个新的代码块。这些代码块现在非常庞大，因为它们包括DOM的垃圾收集以及用于处理海量数据集（> 10,000）而无需浏览器减速的代码。除非必要，否则我将不发布该块。 ajax调用需要相同的东西。

这是我最初通过生成javascript创建空数组变量的php：

<?php
$sql=   "SELECT 
        TABLE_NAME
        FROM information_schema.TABLES 
        WHERE
        TABLE_TYPE='BASE TABLE'
        AND TABLE_SCHEMA='NJVCtestDB'";


$stmt = $DBH->prepare($sql); 
$stmt->setFetchMode(PDO::FETCH_ASSOC);  
echo '<script>';    
try{
    $stmt->execute();
    echo 'var tables = [];';
    while($row = $stmt->fetch()){
        echo 'var '.$row['TABLE_NAME'].' =[];';
        echo 'tables += '.$row['TABLE_NAME'].';';
        echo 'var '.$row['TABLE_NAME'].'Cols =[];';         
    }
    echo 'console.log(tables[1]);';
}catch(PDOException $e){
    echo $e;
}
echo '</script>';       
?>

上述php仅通过在索引上使用语句来调用。没有Ajax。

我的ajax调用的链接是：

<?
    $sql = "DESCRIBE ".$_GET['table'];      
    $stmt = $DBH->prepare($sql);  
    $stmt->setFetchMode(PDO::FETCH_ASSOC);
    $colnames;
        try{
            $stmt->execute();
            //$stmt2->execute();
            $colnames = $stmt->fetchAll(PDO::FETCH_COLUMN);
        }
        catch(PDOException $e){
            echo $e;         
        }
        foreach($colnames as $value){
            print $value ." ";
        }
?>

上面的ajax服务器只是为了获取列名并在空格分隔的字符串中返回名称来解析并通过javascript转换为数组，你可以在我的ajax调用中看到。

我的getJson ajax代码在这里：

<?php
    include "connect.php";
        $sql = "DESCRIBE ".$_GET['table'];
        $stmt = $DBH->prepare($sql); 
        $stmt->setFetchMode(PDO::FETCH_ASSOC);
        $colnames;
        try{
            $stmt->execute();
            $colnames = $stmt->fetchAll(PDO::FETCH_COLUMN);
        }
        catch(PDOException $e){
            echo $e;         
        }       
        $sql = "SELECT * FROM ".$_GET['table']." LIMIT 17000";
        $stmt2 = $DBH->prepare($sql); 
        $stmt2->setFetchMode(PDO::FETCH_ASSOC);
        try{
            $stmt2->execute();          
            while($row = $stmt2->fetch()){
                foreach($colnames as $value){
                    if($row[$value] == null){
                        $row[$value] = "";
                    }
                }               
                $row = array('id' => $i) + $row;                                
                $items['post'][]=($row);
                $i++;
            }
        }
        catch(PDOExcetipn $e){
            echo $e;
        }
        print json_encode($items);  
?>

上面的php对我来说似乎有点多余，因为我再次获取列名。但是这次我还包括实际数据。逐行。

这基本上是我为这个项目编写的所有代码。我没有包含的唯一代码是我的javascript inputChoice（）函数。正如我上面所述，它非常笨重，并且在使用数组时ajax并没有做任何事情。这是一个很大的帖子，所以我为文本墙道歉。我不确定下一步是什么让我以我描述的方式更好地编码。任何意见都非常感谢！

1 个答案:

答案 0 :(得分：0)

如果我更正，你想自动生成表格。

你的索引php块从数据库中检索所有表。

$sql=   "SELECT 
    TABLE_NAME
    FROM information_schema.TABLES 
    WHERE
    TABLE_TYPE='BASE TABLE'
    AND TABLE_SCHEMA='NJVCtestDB'";

所以我们需要将它们添加到主表pseudo code: 

tables = [];
for (table in tableSQL)
{
    tables[table] = tableSQL[table];
    tables[table]['cols'] = [];
}

现在你有一个包含所有表的主表数组。 让我们循环通过这些。 pseudo code: 

for (table in tables)
{
   retrieveColsWithData(table);

}

function retrieveColsWithData(tableKey)
{
     //table = key = table name in DB
     $.ajax({url:"/ryan/nonEmber/ajax.php?table="+table, etc.
     //rest of the ajax call you're doing. Pass the key var to the JSON function
     });
}

上面的函数循环遍历所有表并检索colls。当JSON请求返回时，您只需将colls添加到table[key]['cols']。 现在，您可以使用for in或Object.keys简单地遍历表格主，并绘制包含数据的 HTML 。

您可以重复使用与retrieveColsWithData相关联的inputChoice来重新加载数据。

相关问题
最新问题