我正在尝试从SQL数据库中获取一些数据。
首先，我将主键和一些名称加载到下拉列表中。当用户单击某个项目时，我尝试使用SQL对象的其余值加载表。我已经读过，最好的方法是使用Ajax，但将其转换为表格加载格式是很困难的。
在某些地方我可以找到一些从Ajax加载表/数据并在同一页面上显示的参考吗？ （如果我对新页面进行POST，则相对简单，但是我想在同一页面上加载它。就像显示隐藏一样。）
SQL表：
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)
);
对西班牙语条款感到抱歉。
的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>
答案 0 :(得分：0)
很抱歉迟到的回复，也许您已经找到了答案。但是这可以是你问题的前端答案。
<!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>