weixin_33724659 2015-05-26 22:33 采纳率: 0%
浏览 34

从SQL加载表

I am trying to fetch some data from a SQL database.

First I load the Primary Keys and some name to a dropdown. When the user clicks on an item, I'm trying to load a table with the rest of the values of the SQL object. I've read that the best way to do it is with Ajax, but turning it into a table-loading format is proving difficult.

Is there somewhere where I can find some reference for loading tables/data from Ajax and displaying it on the same page? (It is relatively simple if I do a POST to a new page, however I'd like to load it on the same page. Like showing a hidden .)

The SQL tables:

CREATE TABLE Cliente (

    ClaveCliente        int AUTO_INCREMENT primary key,

    Nombre              varchar(100) not null,
    RFC                 varchar(30) not null

);


CREATE TABLE DatosMes (

    ClaveDatos          int AUTO_INCREMENT primary key,
    FechaDatos          date not null,

    Ingresos            smallint not null,
    Depositos           smallint not null,
    Transferencias      smallint not null,
    Cheques             smallint not null,
    Provisiones         smallint not null,
    Pasivos             smallint not null,
    Revision            smallint not null,
    Envio               smallint not null,
    Pago                smallint not null,

    Balanza             smallint not null,
    Catalogo            smallint not null,
    Informativa         smallint not null,
    ISR                 smallint not null


);

CREATE TABLE DatosMesCliente (

    ClaveDMC            int AUTO_INCREMENT not null,
    ClaveCliente        int not null,
    ClaveDatos          int not null,

    PRIMARY KEY (ClaveDMC),
    FOREIGN KEY (ClaveCliente) REFERENCES Cliente(ClaveCliente),
    FOREIGN KEY (ClaveDatos) REFERENCES DatosMes(ClaveDatos)
);

Sorry about the Spanish terms.


Javascript

<script>
    $(document).ready(function() {
        var populateDatosMes = function(e) {
            var populateDatosMesTBody = function(r) {
                r = JSON.parse(r);
                var tbody = $("#DatosMesTable tbody");
                tbody.children().remove();
                if(r.length > 0) {
                    for(var i in r) {
                        tbody.append(
                            $("<tr>")
                                .append($("<td>").text(r[i].Ingresos))
                                .append($("<td>").text(r[i].Depositos))
                                .append($("<td>").text(r[i].Transferencias))
                                .append($("<td>").text(r[i].Cheques))
                                .append($("<td>").text(r[i].Provisiones))
                                .append($("<td>").text(r[i].Pasivos))
                                .append($("<td>").text(r[i].Revision))
                                .append($("<td>").text(r[i].Envio))
                                .append($("<td>").text(r[i].Pago))
                                .append($("<td>").text(r[i].Balanza))
                                .append($("<td>").text(r[i].Catalogo))
                                .append($("<td>").text(r[i].Informativa))
                                .append($("<td>").text(r[i].ISR))
                        );
                    }
                }
                else {
                    tbody.append(
                        $("<tr>")
                            .append($("<td>")
                                .text("No data to display.")
                                .attr("colspan", 13))
                    );
                }
            };

            var ClaveCliente = $("#ClienteSelectBox option:selected").val();

            $.ajax({
                type: "GET",
                url: "/query/DatosMes.php",
                /**
                 * Note:
                 * DatosMes.php should return a JSON format output similar to this:
                 * [
                 *  {
                 *      ClaveDatos: "",
                 *      FechaDatos: "",
                 *      Ingresos: "",
                 *      Depositos: "",
                 *      Transferencias: "",
                 *      Cheques: "",
                 *      Provisiones: "",
                 *      Pasivos: "",
                 *      Revision: "",
                 *      Envio: "",
                 *      Pago: "",
                 *      Balanza: "",
                 *      Catalogo: "",
                 *      Informativa: "",
                 *      ISR: ""
                 *  },
                 *  ...
                 *  {
                 *      ClaveDatos: "",
                 *      FechaDatos: "",
                 *      Ingresos: "",
                 *      Depositos: "",
                 *      Transferencias: "",
                 *      Cheques: "",
                 *      Provisiones: "",
                 *      Pasivos: "",
                 *      Revision: "",
                 *      Envio: "",
                 *      Pago: "",
                 *      Balanza: "",
                 *      Catalogo: "",
                 *      Informativa: "",
                 *      ISR: ""
                 *  }
                 * ]
                 *
                 */
                data: {
                    "ClaveCliente": ClaveCliente
                },
                success: populateDatosMesTBody,
                error: function(jqXHR, textStatus, errorThrown) {
                    alert("Error on retrieval of DatosMes: " + textStatus);
                }
            });
        };

        var populateCliente = function(r) {
            var ClienteSelectBox = $("#ClienteSelectBox");
            if(ClienteSelectBox.length == 0) {
                return;
            }
            else {
                ClienteSelectBox.children().remove();
                var r = JSON.parse(r);
                if(r.length > 0) {
                    for(var i in r) {
                        ClienteSelectBox.append(
                            $("<option>")
                                .val(r[i].ClaveCliente)
                                .text(r[i].Nombre)
                        );
                    }
                    ClienteSelectBox.bind("change", populateDatosMes);
                }
                else {
                    alert("No Cliente data retrieved.");
                }
            }
        };

        $.ajax({
            type: "GET",
            url: "/query/Cliente.php",
            /**
             * Note:
             * Cliete.php should return a JSON format output similar to this:
             * [
             *  {
             *      ClaveCliente: 1,
             *      Nombre: "asdasd",
             *      RFC: "qweqwedsa"
             *  },
             *  {
             *      ClaveCliente: 2,
             *      Nombre: "asdasd",
             *      RFC: "qweqwedsa"
             *  },
             *  {
             *      ClaveCliente: 3,
             *      Nombre: "asdasd",
             *      RFC: "qweqwedsa"
             *  },
             *  ...
             *  {
             *      ClaveCliente: X,
             *      Nombre: "asdasd",
             *      RFC: "qweqwedsa"
             *  },
             * ]
             *
             */
            success: populateCliente,
            error: function(jqXHR, textStatus, errorThrown) {
                alert("Error on retrieval of Cliente: " + textStatus);
            }
        });
    });
</script>

HTML

<select id="ClienteSelectBox"></select>
<br>
<br>
    <table id="DatosMesTable">
        <thead>
            <tr>
                <th>Ingresos</th>
                <th>Depositos</th>
                <th>Transferencias</th>
                <th>Cheques</th>
                <th>Provisiones</th>
                <th>Pasivos</th>
                <th>Revision</th>
                <th>Envio</th>
                <th>Pago</th>
                <th>Balanza</th>
                <th>Catalogo</th>
                <th>Informativa</th>
                <th>ISR</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table> 
  • 写回答

1条回答 默认 最新

  • weixin_33682719 2015-05-28 03:44
    关注

    Sorry for late reply, perhaps you've already found an answer. But this is can be the front-end answer to your problem.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <script>
        $(document).ready(function() {
            var populateDatosMes = function(e) {
                var populateDatosMesTBody = function(r) {
                    var tbody = $("#DatosMes tbody").children().remove();
                    if(r.length > 0) {
                        for(var i in r) {
                            tbody.append(
                                $("<tr>")
                                    .append($("<th>").text(i + 1 + "."))
                                    .append($("<td>").text(r[i].ClaveDatos))
                                    .append($("<td>").text(r[i].FechaDatos))
                                    .append($("<td>").text(r[i].Ingresos))
                                    .append($("<td>").text(r[i].Depositos))
                                    .append($("<td>").text(r[i].Transferencias))
                                    .append($("<td>").text(r[i].Cheques))
                                    .append($("<td>").text(r[i].Provisiones))
                                    .append($("<td>").text(r[i].Pasivos))
                                    .append($("<td>").text(r[i].Revision))
                                    .append($("<td>").text(r[i].Envio))
                                    .append($("<td>").text(r[i].Pago))
                                    .append($("<td>").text(r[i].Balanza))
                                    .append($("<td>").text(r[i].Catalogo))
                                    .append($("<td>").text(r[i].Informativa))
                                    .append($("<td>").text(r[i].ISR))
                            );
                        }
                    }
                    else {
                        tbody.append(
                            $("<tr>")
                                .append($("<td>")
                                    .text("No data to display.")
                                    .attr("colspan", 16))
                        );
                    }
                };
    
                var ClaveCliente = $(this).children("option:selected").val();
    
                $.ajax({
                    type: "GET",
                    url: "/query/DatosMes.php",
                    /**
                     * Note:
                     * DatosMes.php should return a JSON format output similar to this:
                     * [
                     *  {
                     *      ClaveDatos: "",
                     *      FechaDatos: "",
                     *      Ingresos: "",
                     *      Depositos: "",
                     *      Transferencias: "",
                     *      Cheques: "",
                     *      Provisiones: "",
                     *      Pasivos: "",
                     *      Revision: "",
                     *      Envio: "",
                     *      Pago: "",
                     *      Balanza: "",
                     *      Catalogo: "",
                     *      Informativa: "",
                     *      ISR: ""
                     *  },
                     *  ...
                     *  {
                     *      ClaveDatos: "",
                     *      FechaDatos: "",
                     *      Ingresos: "",
                     *      Depositos: "",
                     *      Transferencias: "",
                     *      Cheques: "",
                     *      Provisiones: "",
                     *      Pasivos: "",
                     *      Revision: "",
                     *      Envio: "",
                     *      Pago: "",
                     *      Balanza: "",
                     *      Catalogo: "",
                     *      Informativa: "",
                     *      ISR: ""
                     *  }
                     * ]
                     *
                     */
                    params: {
                        "ClaveCliente": ClaveCliente
                    },
                    success: populateDatosMesTBody,
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert("Error on retrieval of DatosMes: " + textStatus);
                    }
                });
            };
    
            var populateCliente = function(r) {
                var ClienteSelectBox = $("#ClienteSelectBox");
                if(ClienteSelectBox.length == 0) {
                    return;
                }
                else {
                    ClienteSelectBox.children().remove();
                    if(r.length > 0) {
                        for(var i in r) {
                            ClienteSelectBox.append(
                                $("<option>")
                                    .val(r[i].ClaveCliente)
                                    .text(r[i].Nombre)
                                    // or .text(r[i].RFC)
                            );
                        }
                        ClienteSelectBox.bind("change", populateDatosMes);
                    }
                    else {
                        alert("No Cliente data retrieved.");
                    }
                }
            };
    
            $.ajax({
                type: "GET",
                url: "/query/Cliente.php",
                /**
                 * Note:
                 * Cliete.php should return a JSON format output similar to this:
                 * [
                 *  {
                 *      ClaveCliente: 1,
                 *      Nombre: "asdasd",
                 *      RFC: "qweqwedsa"
                 *  },
                 *  {
                 *      ClaveCliente: 2,
                 *      Nombre: "asdasd",
                 *      RFC: "qweqwedsa"
                 *  },
                 *  {
                 *      ClaveCliente: 3,
                 *      Nombre: "asdasd",
                 *      RFC: "qweqwedsa"
                 *  },
                 *  ...
                 *  {
                 *      ClaveCliente: X,
                 *      Nombre: "asdasd",
                 *      RFC: "qweqwedsa"
                 *  },
                 * ]
                 *
                 */
                success: populateCliente,
                error: function(jqXHR, textStatus, errorThrown) {
                    alert("Error on retrieval of Cliente: " + textStatus);
                }
            });
        });
        </script>
    </head>
    <body>
        ...
        <select id="Cliente"></select>
        <table id="DatosMes">
            <thead>
                <tr>
                    <th></th>
                    <th>ClaveDatos</th>
                    <th>FechaDatos</th>
                    <th>Ingresos</th>
                    <th>Depositos</th>
                    <th>Transferencias</th>
                    <th>Cheques</th>
                    <th>Provisiones</th>
                    <th>Pasivos</th>
                    <th>Revision</th>
                    <th>Envio</th>
                    <th>Pago</th>
                    <th>Balanza</th>
                    <th>Catalogo</th>
                    <th>Informativa</th>
                    <th>ISR</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        ...
    </body>
    </html>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题