Eine dynamische Webseite auf Basis der Daten einer anderen Webseite mit jquery

Question

auffüllen Ich habe eine Datei index.php, wo ein Benutzer seine Daten (Name, Alter, Staat, Land) eingibt und klickt dann auf Absenden, die ihn zu about.php umleiten und in about.php werden seine Informationen angezeigt. Wie erreiche ich das mit jquery? Ich bin neu in Web-Entwicklung, hier ist mein Code:
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 (in beide über inbegriffen .php und 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

Sie könnten dies mit dem Webspeicher (localStorage) tun.

Beware, dass localStorage Daten nur für eine Sitzung speichert!

Ich habe zwei * .html-Dateien erstellt - ein 'page1.html' und andere 'page2.html' genannt.

page1.html besteht aus Eingabeformular und Werte Webspeichersystem seting:

<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 besteht aus Tabelle, in der Daten und Werte von Geting Webspeichersystem zeigen:

<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> 

Aber Sie sollten stattdessen PHP verwenden (zum Einfügen & Daten erhalten usw.).