javascript - PHP & AJAX - 获取数据时在另一个页面上不刷新
问题描述
我当前的程序正在添加数据并将其插入数据库,但我想要的是,我希望在其他页面或浏览器上自动不刷新。所以我有这两个浏览器,我怎样才能在不刷新的情况下将数据提交到另一个页面。现在它正在发送,但问题是我需要刷新页面
这是我的Ajax4.html代码
<form id="postForm">
<input type="text" name="name" id="name2">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('postForm').addEventListener('submit', postName);
function postName(e){
e.preventDefault();
var name = document.getElementById('name2').value;
var params = "name="+name
;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'process.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function(){
console.log(this.responseText);
}
xhr.send(params);
}
</script>
我的Process.php
这是我连接数据库的地方
<form id="postForm">
<input type="text" name="name" id="name2">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('postForm').addEventListener('submit', postName);
function postName(e){
e.preventDefault();
var name = document.getElementById('name2').value;
var params = "name="+name
;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'process.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function(){
console.log(this.responseText);
}
xhr.send(params);
}
</script>
我的发送页面Ajax5.html
这是我获取数据的地方,也是我想在不刷新页面的情况下发送数据的地方
<button id="button">Get User</button>
<br><br>
<h1>Users</h1>
<div id="users"></div>
<script>
document.getElementById('button').addEventListener('click', loadUsers);
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'users.php', true);
xhr.onload = function(){
if(this.status == 200){
var users = JSON.parse(this.responseText);
var output = '';
for(var i in users){
output += '<ul>' +
'<li>ID: ' +users[i].id+'</li>' +
'<li>Name: ' +users[i].name +'</li>' +
'</ul>';
}
document.getElementById('users').innerHTML = output;
}
}
xhr.send();
}
</script>
解决方案
您可以添加 setInterval 以定期更新用户列表:
var still_fetching = false;
//fetch data every 3 seconds (3000)
setInterval(function(){
if (still_fetching) {
return;
}
still_fetching = true;
loadUsers();
}, 3000);
//need to update a bit this function
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'users.php', true);
xhr.onload = function(){
if(this.status == 200){
var users = JSON.parse(this.responseText);
var output = '';
for(var i in users){
output += '<ul>' +
'<li>ID: ' +users[i].id+'</li>' +
'<li>Name: ' +users[i].name +'</li>' +
'</ul>';
}
document.getElementById('users').innerHTML = output;
still_fetching = false;
}
}
xhr.send();
}
推荐阅读
- wordpress - 当订阅者角色用户登录时如何运行自定义脚本
- laravel - 在 Laravel 6.0.4 上安装数据表时出错
- c - 使用 setjmp() 和 longjmp() 防止程序中的分段错误
- java - 如何检查该字段是否存在于firestore中?
- php - 按修改日期排序 php 数组/或 JSON [可能重复]
- android - 单击同级时将焦点重定向到 EditText
- python - 合并 2 个重叠的句子
- push-notification - 如何在客户端(移动)代码中安全地使用 ConnectionString
- postgresql - 所有新模式和视图的 Postgresql 只读用户
- r - 我在函数的代码中遇到问题