使用javascript發送數組數據到另一個頁面？

Question

我想使用javascript將數據發送到另一個頁面。我將使用帶有Onclick功能的「下一步」按鈕。我希望當我單擊該按鈕時，此頁面上文本框中的所有數據都將發送到使用javascript在另一頁上顯示。

<table border="1" id="bill_table" width="50%" align="center" style="border-collapse: collapse" cellspacing="3" cellpadding="5"> 
    <tr style="display:none;"> 
     <td class="style2">&nbsp;</td> 
     <td class="style2"> 
      <div id="name_div"> 
       <input name="item[]" type="text" id="item" size="20" style="width:100px;"/> 
      </div> 
     </td> 
     <td class="style2"> 
      <input name="job[]" type="text" id="job" size="20" style="width:100px;"/> 
     </td> 
     <td class="style2"> 
      <div id="relation_div"> 
       <input name="rate[]" type="text" id="rate" size="20" style="width:100px;"/> 
      </div> 
     </td> 
     <td class="style2">&nbsp;</td> 
    </tr> 
    <tr> 
     <td class="style2">SNo</td> 
     <td class="style2">Item</td> 
     <td class="style2">Job Charges</td> 
     <td class="style2">Rate</td> 
     <td class="style2"> 
      <input name="add_button" type="button" id="add_button" size="20" value="Add" style="width:50px" /> 
     </td> 
    </tr> 
</table> 
<p align="center"> 
    <input name="Submit1" type="submit" value="submit" /> 
</p> 

和javascript I M curently使用： -

var itemCount = 0; 
$(document).ready(function() { 
    var objs = []; 
    var temp_objs = []; 
    $("#add_button").click(function() { 
    var html = ""; 

    var obj = { 
     "ROW_ID": itemCount, 
     "Item": $("#item").val(), 
     "JOB": $("#job").val(), 
     "Rate": $("#rate").val(), 
    } 

    $("#item").val(''); 
    $("#job").val(''); 
    $("#rate").val(''); 

    // add object 
    objs.push(obj); 
    itemCount++; 

    // dynamically create rows in the table 
    html = "<tr id='tr" + 
     itemCount + "'>" + "<td>" + 
     itemCount + "</td>" + 
     "<td><INPUT type='text' name='txt1[]' readonly value='" + 
     obj['Item'] + "'/></td>" + 
     "<td><INPUT type='text' name='txt2[]' readonly value='" + 
     obj['JOB'] + "'/></td>" + 
     "<td><INPUT type='text' readonly name='txt3[]' value='" + 
     obj['Rate'] + "'/></td>" + 
     "<td><input type='button' id='" + 
     itemCount + 
     "' value='remove'>" + 
     "</td> </tr>"; 

    //add to the table 
    $("#bill_table").append(
     html) 

     // The remove button click 
    $("#" + itemCount).click(
     function() { 
     var buttonId = $(this) 
      .attr("id"); 

     //write the logic for removing from the array 
     $("#tr" + buttonId).remove(); 
     }); 
    }); 
}); 

Answer 1

只需使用一種形式，通過PHP revieve下一個頁面上的數據。

<form action="your_file.php" method="post"> 

下一頁

var javaScriptVariable = "<?php echo $_POST['yourInputId'] ?>"; 

Answer 2

不要使用提交按鈕，這樣的邏輯，這將使你的瀏覽器中加載新的一頁

我會建議使用單分頁架構（SPA ）和客戶端模板引擎，我的最愛是EJS http://www.embeddedjs.com/

與php和jsp類似，您可以使用<％>和<％=％>並將值傳遞給tamplete。

假設template.ejs

<tr id='tr<%=itemCount%>'> 
<td><%=itemCount%></td> 
<td><INPUT type='text' name='txt1[]' readonly value='<%=obj['Item']%>'/></td> 
<td><INPUT type='text' name='txt2[]' readonly value='<%=obj['JOB']%>'/></td> 
<td><INPUT type='text' readonly name='txt3[]' value='<%=obj['Rate']%>'/></td> 
<td><input type='button' id='<%=itemCount%>' value='remove'></td> 
</tr> 

使用EJS作爲

var html = new EJS({url: 'template.ejs'}).render({"itemCount":itemCount, "obj":obj}); 
$("#bill_table").append(html) 

你需要使用一些臨時的服務器在本地主機進行測試，如Apache或XMPP或WAMP或任何其他可用

Answer 3

你可以使用jquery序列化函數並重定向到下一頁，像這樣

$("form").serialize() 

例如您的形式包含此

<form action=""> 
    First name: <input type="text" name="FirstName" value="Mickey"><br> 
    Last name: <input type="text" name="LastName" value="Mouse"><br> 
</form> 

所以序列化之後，你會得到

FirstName=Mickey&LastName=Mouse 

然後使用window.location的這樣

window.location="youNextPage.html?"+YourSerializedData 

Answer 4

嘗試使用localStorage.setItem()和.getItem() ，因爲它更簡單。