【发布时间】：2015-05-26 22:33:23
【问题描述】：
我正在尝试从 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>
【问题讨论】：
-
介意展示
SQL Object的样子吗？ -
@Gideon 我已经添加了表格。
-
你喜欢使用
jquery吗？ -
添加什么
keys连接两个表？ -
另外，您在后端使用什么？
PHP?Grails?
标签： javascript mysql ajax