[英]Populating a dynamic webpage based on another webpage's data using jquery
我有一个文件 index.php,用户在其中输入他的数据(姓名、年龄、州、国家),然后单击提交按钮,该按钮会将他重定向到 about.php 并在 about.php 中显示他的信息。 如何使用 jquery 实现这一点。 我是网络开发的新手,这是我的代码:
索引.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);
});
您可以使用网络存储( 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包含用于显示数据和从 Web 存储获取值的表:
<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(插入和获取数据等)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.