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

关于.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（包含在 about.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 包含输入表单和设置值到网络存储：

<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（插入和获取数据等）。