（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这一点。并转换为JSON，而不是使用序列化。

由于片段将引发与localStorage的错误，这里是一个可行的小提琴：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会坚持这些值。