javascript - 如何在调用 ajax 后将结果显示到新的 HTML 页面中

Question

我正在调用一个 ajax，我能够成功调用它，但我只能在隐藏我的表单后才能在同一页面的表格中显示该数据。我想做的是调用 ajax，成功回调后我想在另一个页面上填充该表

这是我的第一个 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 id="all" name="outlet">
                 <option>ALL</option> 
                <c:forEach var="item" items="${obj.outlet}">
                    <option>${item}</option>
                </c:forEach>
            </select> 

           <div><br>
                </div>
                <div class='progress progress-striped deactive' style="background-color: white">

        <div class='progress-bar' >Loading..Please Wait...</div>
    </div>

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

在这下面我定义了表格标签来填充表格

<table id="newTable" class="table table-striped" border="2" >
</table>

下面是我的 JavaScript 代码，用于动态填充表格

 $(document).ready(function() {
    $("#formid").submit(function(event) {
        event.preventDefault();
    $.ajax({
        url : "HourlySales",
        method : "GET",
        data : {
               fromdate : $("#startdate").val(),
               todate : $("#enddate").val(),
               outlet : $("#all").val()

             },
        success : function(tableValue) {

        console.log("test",tableValue);
        $("#formid").hide();
         addTable(tableValue)
        }
    });


    function addTable(tableValue) {
        var col = Object.keys(tableValue[0]); // get all the keys from first
                                                // object
        var countNum = col.filter(i => !isNaN(i)).length; // count all which
                                                            // are number
        var num = col.splice(0, countNum); // cut five elements from frist
        col = col.concat(num); // shift the first item to last
        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1); // TABLE ROW.


          for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th"); // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < tableValue.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = tableValue[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("newTable");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        }

});
});

我想做的是在另一个 html 页面上定义表格标签，在单击提交按钮后，表格应该填充到另一个定义了表格标签的 html 页面上。我不想在同一页上填充表格。

Answer 1

您可以在您的网站上生成 HTML，然后使用数据 url 将其显示在新页面上。

像这样:

function openHTML(html) {
    window.open('data:text/html;charset=utf-8,' + encodeURI(html));
}

或者构建第二个页面，您可以在其中提交数据。