（HTML / JavaScript）显示器将数据序列化到另一个HTML页面

Question

我正在尝试将我的序列化数据从表输入显示到另一个HTML页面。 我目前所拥有的是将序列化数据显示为来自JavaScript的警报。

HTML文件代码块

<form id="form">
<div class="table-responsive">
    <table class="table table-bordered table-striped table-highlight">
        <thead class="thead-inverse">
            <tr>
                <th>Race</th>
                <th>Equity Partners</th>
                <th>Non-Equity Partners</th>
                <th>Associates</th>
                <th>Counsel</th>
                <th>Other Lawyers</th>
                <th>Totals</th>
            </tr>
        </thead>
        <tbody>


            <tr>

                <td><label>American Indian/Alaska Native</label></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_EP" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_NEP" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_A" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian1_C" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_OL" value="" placeholder="Enter Value Here" /></td>

                <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_T" value="" placeholder="Enter Value Here" /></td>

            </tr>

JavaScript文件代码块

$("#btn-ser1").click(function(){
  data_array = $("#form").serialize();

  alert(data_array);

Answer 1

好吧，如果您可以访问基于服务器的脚本，则可以使用PHP / ASP或其他服务器端脚本语言来发布和打印data_array 。

PHP示例：

第2页

 <script>
 data = <? if (isset($_POST['data_page1'])){ echo $_POST['data_page1'];}else{echo "null";}>?;
 </script>

如果没有，我建议localstorage使用localstorage 。 并转换为JSON而不使用序列化。

由于该代码段将引发与本地存储有关的错误，因此以下小提琴有效： https ://jsfiddle.net/gutw9o6s/

 //page 1 $("#btn-ser1").click(function() { data_array = $("#form >input").filter(function() { return $(this).val(); }); localStorage.setItem('data_page1', JSON.stringify(data_array)); }); //page 2 $("#btn-ser2").click(function() { if (localStorage.key('data_page1')) { data = JSON.parse(localStorage.getItem('data_page1')); console.log(data); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form"> <div class="table-responsive"> <table class="table table-bordered table-striped table-highlight"> <thead class="thead-inverse"> <tr> <th>Race</th> <th>Equity Partners</th> <th>Non-Equity Partners</th> <th>Associates</th> <th>Counsel</th> <th>Other Lawyers</th> <th>Totals</th> </tr> </thead> <tbody> <tr> <td><label>American Indian/Alaska Native</label></td> <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_EP" value="" placeholder="Enter Value Here" /></td> <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_NEP" value="" placeholder="Enter Value Here" /></td> <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_A" value="" placeholder="Enter Value Here" /></td> <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian1_C" value="" placeholder="Enter Value Here" /></td> <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_OL" value="" placeholder="Enter Value Here" /></td> <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_T" value="" placeholder="Enter Value Here" /></td> </tr> </tbody> </table> </div> </form> <button id="btn-ser1">Set page 1</button> <button id="btn-ser2">Get page 2</button> 

记得有人成功进入第二页后删除localStorage，因为否则localStorage将保留这些值。