使用jquery填充基於另一個網頁的數據的動態網頁

Question

我有一個文件index.php用戶輸入他的數據（姓名，年齡，州，國家），然後點擊提交按鈕，將他重定向到about.php並在about.php顯示他的信息。如何實現使用jQuery的。我是新的Web開發，這裏是我的代碼：
的index.php

<div class="row"> 
    <div class="col-md-3 no-padding"> 
     <input type="text" id = "name" > 
</div> 
<div class="col-md-3 no-padding"> 
    <input type="text" id = "age" > 
</div> 
<div class="col-md-3 no-padding"> 
    <input type="text" id = "state" > 
</div> 
<div class="col-md-3 no-padding"> 
    <input type="text" id = "country" > 
</div> 
<a href="about.php"> 
    <button type="submit" class="btn btn-primary center-block col-md-2" id = "submit">Submit</button> 
</a> 

about.php

<div class="table-responsive"> 
<table class="table table-bordered" id = "about-table"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>name</th> 
      <th>age</th> 
      <th>state</th> 
      <th>country</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

的script.js（包含在這兩個約.php和index.php）

$("#submit").on("click",function(){ 
var name = $("#name").val() 
var age = $("#age").val() 
var state = $("#state").val() 
var country = $("#country").val() 

var newRow = $("<tr>"); 
var cols = ""; 
cols += '<td>' + name +'</td>'; 
cols += '<td>' + age + '</td>'; 
cols += '<td>' + state + '</td>'; 
cols += '<td>' + country + '</td>'; 
newRow.append(cols); 
$("#about-table").append(newRow); 
}); 

Answer 1

您可以使用網絡存儲（localStorage）執行此操作。

請注意localStorage只存儲一個會話的數據！

我已經創建了兩個* .html文件 - 一個叫'page1.html'等'page2.html'。

page1.html由輸入的形式，並且塞汀值web存儲：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<form> 
    <input type="text" id="name" placeholder="Your name..." /> 
    <input type="number" id="age" placeholder="Your age..." /> 
    <input type="text" id="state" placeholder="State..." /> 
    <input type="text" id="country" placeholder="Country..." /> 
    <input type="submit" id="submitBtn" value="Submit" /> 
</form> 

<script> 
    (function() { 

     var name, age, state, country; 

     // Get & set data on submit 
     $('form').on('submit', function(e) { 

      // prevent submition 
      e.preventDefault(); 

      // set var values 
      name = $('#name').val(), 
      age = $('#age').val(), 
      state = $('#state').val(), 
      country = $('#country').val() 

      if (typeof(Storage) !== 'undefined') { 
       // Store values to web storage 
       window.localStorage.setItem('name', name); 
       window.localStorage.setItem('age', age); 
       window.localStorage.setItem('state', state); 
       window.localStorage.setItem('country', country); 
      } else { 
       // web storage not supported 
      } 

      // redirect to page2.html 
      window.location.replace('page2.html'); 

     }); 

    })(); 
</script> 

page2.html包括表，其中顯示從網絡存儲數據和歌廳值：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<table> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>State</th> 
     <th>Country</th> 
    </tr> 
    <tr> 
     <td id="name"></td> 
     <td id="age"></td> 
     <td id="state"></td> 
     <td id="country"></td> 
    </tr> 
</table> 

<script> 
    (function() { 

     // table columns 
     var $name = $('#name'), 
      $age = $('#age'), 
      $state = $('#state'), 
      $country = $('#country'); 

     // get & set values from web storage 
     $name.text(window.localStorage.getItem('name')); 
     $age.text(window.localStorage.getItem('age')); 
     $state.text(window.localStorage.getItem('state')); 
     $country.text(window.localStorage.getItem('country')); 

    })(); 
</script> 

但是你應該使用php來代替（插入&獲取數據等）。