自动更新其他页面而不刷新
Automatically update another page without refreshing
我有这个问题,我如何可以自动更新我的网页而不刷新。谁能建议并解释一下解决我的问题的最好方法是什么?提前感谢
. php文件在这个php文件中,我将只询问用户名。
<form id="form1" name="form1" method="post" action="save.php">
<input type="text" name="firstname" id="firstname"/>
<input type="text" name="lastname" id="lastname"/>
<input type="submit" name="add" id="add" value="add"/>
</form>
save.php在这个文件中,我将把值保存到数据库中。
$firstname=isset($_POST['firstname'])? $_POST['firstname'] : '';
$lastname=isset($_POST['lastname'])? $_POST['lastname'] : '';
$sql="Insert into student (sno,firstname,lastname) values ('','$firstname','$lastname')";
$sql=$db->prepare($sql);
$sql->execute();
studentlist.php在这个文件中,我想显示我输入的名字
$sql="Select firstname, lastname from student";
$sql=$db->prepare($sql);
$sql->execute();
$output="The List of students <br></br>";
while($result=$sql->fetch(PDO::FETCH_ASSOC))
{
$output.="".$result['firstname']." ".$result['lastname']."<br></br>";
}
当两个页面打开时,我需要刷新studentlist.php才能看到最近添加的数据。
谢谢:D
您需要使用ajax和jquery。像这样的代码应该可以工作:
. php
添加到文档的头部:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){//loads the information when the page loads
var saveThenLoad = {
url: "save.php",//the file sending data to
type: 'POST',//sends the form data in a post to save.php
dataType: 'json',
success : function(j) {
if(j.error = 0){
$("#student_info").html(j.info);//this will update the div below with the returned information
} else {
$("#student_info").html(j.msg);//this will update the div below with the returned information
}
}
}
//grabs the save.submit call and sends to the ajaxSubmit saveThenLoad variable
$("#save").submit(function() {
$(this).ajaxSubmit(saveThenLoad);
return false;
});
//grabs the submit event from the form and tells it where to go. In this case it sends to #save.submit above to call the ajaxSubmit function
$("#add").click(function() {
$("#save").submit();
});
});
</script>
<!-- put this in the body of the page. It will wait for the jquery call to fill the data-->
<div id="student_info">
</div>
我将把save和studentlist合并成一个文件,像这样:
$return['error']=0;
$return['msg']='';
$firstname=isset($_POST['firstname'])? $_POST['firstname'] : '';
$lastname=isset($_POST['lastname'])? $_POST['lastname'] : '';
$sql="Insert into student (sno,firstname,lastname) values ('','$firstname','$lastname')";
$sql=$db->prepare($sql);
if(!$sql->execute()){
$return['error']=1;
$return['msg']='Error saving data';
}
$sql="Select firstname, lastname from student";
$sql=$db->prepare($sql);
if(!$sql->execute()){
$return['error']=1;
$return['msg']='Error retrieving data';
}
$output="The List of students <br></br>";
while($result=$sql->fetch(PDO::FETCH_ASSOC))
{
$output.="".$result['firstname']." ".$result['lastname']."<br></br>";
}
$return['$output'];
echo json_encode($return);
是否需要在三个单独的文件中?至少,你能把add.php和studentlist.php结合起来吗?如果是这样,那么jQuery可能是最好的选择。您可能还想使用一些html标记,以便更容易地向DOM动态添加元素。
以下是合并后的文件:
<form id="form1" name="form1">
<input type="text" name="firstname" id="firstname"/>
<input type="text" name="lastname" id="lastname"/>
<input type="submit" name="add" id="add" value="add"/>
</form>
The List of students <br></br>
<ul id="student-list">
<?php
//I assume you're connecting to the db somehow here
$sql="Select firstname, lastname from student";
$sql=$db->prepare($sql);
$sql->execute();
while($result=$sql->fetch(PDO::FETCH_NUM)) //this might be easier to output than an associative array
{
//Returns will make your page easier to debug
print "<li>" . implode(" ", $result) . "</li>'n";
}
?>
</ul>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$('#form1').submit(function(event){
event.preventDefault();
//submit the form values
var firstname = $('#firstname').val();
var lastname = $('#lastname').val();
//post them
$.post( "test.php", { firstname: firstname, lastname: lastname })
.done( function(data) {
//add those values to the end of the list you printed above
$("<li>" + firstname + ' ' + lastname + "</li>").appendTo('#student-list');
});
});
});
</script>
您可能需要在$中做一些测试。在上面的电话中确保它得到了正确的处理。在文档中了解更多。
如果您确实需要三个文件,那么您可能需要使用ajax对studentlist.php进行某种轮询,使用setTimeout来查看是否有任何新项目。
最便宜的方法是使用元刷新来刷新您的页面(或使用JavaScript setInterval和ajax)。
更昂贵的方法是使用实时JavaScript应用程序。看看插座。IO之类的
相关文章:
- 如何在不刷新页面的情况下更新显示框
- EXTJS-图表刷新,重绘-如何更新图表
- 如何检查Json文件更新,如果更新了,则用更新的数据刷新我的页面
- JQGrid使用服务器编辑后的更新数据刷新数据
- 实时更新,无需刷新页面
- ExtJS网格在存储更新后未刷新
- 在内容刷新或更新时调整iframe的大小
- 为什么我的 cshtml 页面的 javascript 没有在浏览器中更新/刷新
- HTML5 网址更新而不刷新
- Angular/UI路由器-如何在不刷新所有内容的情况下更新URL
- Kendo Scheduler更新数据源后刷新
- 如何在用户更新AngularJs中的控制器时刷新$state
- 使用 ajax 调用使用操作类返回的数据刷新(更新)表的各个行
- 地图标记刷新/更新而不刷新整个地图
- 更新面板中的谷歌地图api-信息窗口中的HTML不会显示在刷新更新面板上
- 添加新的列表选项,动态刷新更新后的列表
- 从javascript调用webservice来刷新更新面板
- 实时刷新/更新
- 我怎么做,当计时器计数回来,它将刷新/更新文本文件中的文本
- 通过基本的JavaScript而不是jQuery或AJAX刷新/更新DIV