[英]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.