我正在努力通过 JSON 数据创建一些 HTML 表。我有一个 servlet，我将一些数据返回为 JSON 格式，并使用 javascript 操作该 JSON 数据。我陷入困境的是我的 AJAX 没有调用。
我有一个表单，其中有 3 个输入FROMDATE、TO DATE 和 OUTLET 导出位于选择选项中，选项 1 为“全部”，另外还有 3 个
这是我的 HTML 表单:
<form id="formId" method="get">
<div class="container">
<h4>Start Date:</h4>
<input type="text" id="startdate" name="fromdate" width="276"
placeholder="dd/mm/yyyy" required />
<h4>End Date:</h4>
<input type="text" id="enddate" name="todate" width="276"
placeholder="dd/mm/yyyy" required />
<h4>Outlets:</h4>
<select name="outlet" id="all">
<option>ALL</option>
<c:forEach var="item" items="${obj.outlet}">
<option>${item}</option>
</c:forEach>
</select>
<br>
<br>
<div>
<button id="button" class="btn btn-default" type="submit">Search</button>
</div>
</div>
</form>
<div id="tbl"></div> //after calling AJAX successfully here i would populate my table
<script type="text/javascript" src="JavaScript/DateWiseOlWiseCounterWisejs.js"></script>
现在在我的 JavaScript 中，我正在编写一些逻辑来根据需要填充表并调用 ajax，但这并不成功
这是我的 JavaScript:
$(document).ready(function() {
$("#formId").submit(function(event) {
$.ajax({
url : "DateWiseOlwiseCounterWiseServlet",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("#formId").hide();
var dataObj = formatData(data);
addTable(dataObj);
}
});
function formatData(data) {
let toReturn = [];
let dateWiseObj = {};
let maxUniqueForOutlets = {};
data.forEach(function(d) {
if (!maxUniqueForOutlets[d["outlet"]]) {
maxUniqueForOutlets[d["outlet"]] = [];
}
if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
}
if (!dateWiseObj[d["billdate"]]) {
dateWiseObj[d["billdate"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
}
}
}
});
return {
dateWiseObj: dateWiseObj,
maxUniqueForOutlets: maxUniqueForOutlets
};
};
function addTable(dataObj) {
let dateWiseObj = dataObj.dateWiseObj;
let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Outlet";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function(d) {
th = document.createElement("th");
th.innerHTML = d;
th.colSpan = maxUniqueForOutlets[d].length + 1;
headerRow.appendChild(th);
});
table.appendChild(thead);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Date";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Counter";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function(k) {
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
maxUniqueForOutlets[k].forEach(function(d) {
th = document.createElement("th");
th.innerHTML = d;
headerRow.appendChild(th);
});
});
table.appendChild(thead);
thead.appendChild(headerRow);
let tbody = document.createElement("tbody");
Object.keys(dateWiseObj).forEach(function(k) {
let row = document.createElement("tr");
let td = document.createElement("td");
td.innerHTML = k;
row.appendChild(td);
grandTotal = 0;
outletWiseTotal = {};
Object.keys(maxUniqueForOutlets).map(function(d) {
outletWiseTotal[d] = 0;
if (dateWiseObj[k][d]) {
Object.keys(dateWiseObj[k][d]).forEach(function(i) {
outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
});
}
grandTotal += outletWiseTotal[d];
});
td = document.createElement("td");
td.innerHTML = grandTotal;
row.appendChild(td);
Object.keys(maxUniqueForOutlets).map(function(d) {
td = document.createElement("td");
td.innerHTML = outletWiseTotal[d];
row.appendChild(td);
maxUniqueForOutlets[d].forEach(function(i) {
td = document.createElement("td");
td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
row.appendChild(td);
});
});
tbody.appendChild(row);
//console.log(outletWiseTotal);
});
table.appendChild(tbody);
let divContainer = document.getElementById("tbl");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
});
});
我正在成功函数内调用函数调用，但没有任何反应。当点击提交按钮时，它只是重新加载页面，甚至不调用 JavaScript 文件。我在外部或内部调用我的 JS 文件，但没有发生任何事情。
最佳答案
使用event.preventDefault()停止默认行为:
$("#formId").submit(function(event) {
event.preventDefault();
因为您在表单上绑定(bind)了一个提交事件，而您又调用了一个 ajax 请求。因此，您需要按照建议停止表单的默认行为。
关于javascript - 无法调用AJAX，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52983312/