Javascript 基于另一个网页填充动态网页'；使用jquery访问数据

我有一个index.php文件，用户在其中输入数据（姓名、年龄、州、国家），然后单击submit按钮，将他重定向到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>

$("#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);
});

关于.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>

#
名称
年龄
状态
国

js（包含在about.php和index.php中）

$（“#提交”）。在（“单击”，函数（）{
变量名称=$（“#名称”）.val（）
变量年龄=$（“#年龄”）.val（）
var state=$（“#state”）.val（）
var country=$（“#country”）.val（）
var newRow=$（“”）；
var cols=“”；
cols+=''+名称+''；
cols+=''年龄+''；
cols+=''+状态+''；
cols+=''+国家+''；
newRow.append（cols）；
$（“#关于表”）.append（newRow）；
});

您可以使用web存储（）完成此操作

本地存储只为一个会话存储数据的Beaware

我创建了两个*.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>

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

（功能（）{
变量名称、年龄、州、国家；
//在提交时获取和设置数据
$（'form'）。关于（'submit'，函数（e）{
//防止提交
e、 预防默认值（）；
//设置var值
name=$（'#name'）.val（），
年龄=$（“#年龄”）.val（），
state=$（'#state'）.val（），
国家=$（“#国家”）.val（）
if（类型（存储）！=‘未定义’）{
//将值存储到web存储
window.localStorage.setItem（'name'，name）；
window.localStorage.setItem（'age'，age）；
window.localStorage.setItem（'state'，state）；
window.localStorage.setItem（'country'，country）；
}否则{
//不支持web存储
}
//重定向到page2.html
window.location.replace（'page2.html'）；
});
})();

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

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

名称
年龄
状态
国
（功能（）{
//表列
变量$name=$（'#name'），
$age=$（“#age”），
$state=$（“#state”），
$country=$（“#country”）；
//从web存储获取和设置值
$name.text（window.localStorage.getItem（'name'））；
$age.text（window.localStorage.getItem（'age'）；
$state.text（window.localStorage.getItem（'state'）；
$country.text（window.localStorage.getItem（'country'）；
})();

---

但是你应该改用php（插入和获取数据等）。

请做一些基础研究/学习如何使用PHPY处理表单如果不解析以前放入数据的url，你就无法在客户端将数据从一页传送到另一页，b）使用cookies或c）使用本地或会话存储如何将数据从index.php传递到about.php？我现在正在script.js中获取数据，如何将这些数据传递到填充index.php。请您提供帮助。查找一些有关表单处理的信息，特别是关于

$\u POST

，将数据存储在数据库中，然后在

about.php

上打印出来