Question

我正在通过JSON数据创建一些HTML表。我有一个servlet，从这里我将一些数据返回为JSON格式，并使用JavaScript处理该JSON数据。卡住的地方是我的AJAX没有打电话。

我有一个表单，其中有3个输入 FROMDATE，TO DATE和OUTLET 出口处于选择选项中，其中选项1为“ ALL”，还有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文件。

Answer 1

更改此

<button id="button" class="btn btn-default" type="submit">Search</button>

到

<button id="button" class="btn btn-default" type="button">Search</button>

并使用点击事件代替form.submit

$("#button").click(function(event) {

或者您可以使用event.preventDefault();

Answer 2

使用event.preventDefault()停止默认行为：

 $("#formId").submit(function(event) {
    event.preventDefault();

因为您绑定了表单上的Submit事件，然后又调用了一个Ajax请求。因此，您需要按照建议停止表单的默认行为。

无法拨打AJAX

2 个答案: