php页面运行一闪就不见,求救命:使用AJAX刷新的内容一闪就消失了

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

初学者,想做一个页面,点击按钮,向服务器端PHP文件发出指令,服务器端根据指令不同,查询数据库,将不同内容返回到页面,通过AJAX在页面下方刷新出来。

之前都很顺,但是到了刷新的时候,就出问题了。

首先,需要的内容确实刷新出来了,但只存在了一瞬间,一闪而过,然后页面又还原到点击之前的效果。。我试了很多方法,最后在刷新后加了句alert才把页面定住,看见了效果。。

具体形容:页面下方空白,点击,出现内容(存在极短一段时间,约0.1~0.2S),内容消失,恢复点击前的空白

上面是第一个问题

第二个问题,在发送xmlHttp.send()下面,我只有在加了一个alert拖延几秒之后,才能接收到服务器的响应,如果不加就会“跑飞了”,但如果这个alert放着不点,过了几秒接收到的响应就有错误或者收不到。

下面是我的部分页面代码

function require(str)

{var xmlHttp;

xmlHttp=null;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlHttp=new XMLHttpRequest();

}else

{// code for IE6, IE5

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}

var url="read.php";

xmlHttp.onreadystatechange=function()

{if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{ document.getElementById("liebiao").innerHTML=xmlHttp.responseText;

return

} }

xmlHttp.open("POST",url,true);

xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");

xmlHttp.setRequestHeader("If-Modified-Since","0");//xmlHttp1.setRequestHeader("Cache-Control","no-cache");

xmlHttp.send("&require=" + str);alert("正在加载,请稍候");//这一句似乎能用来占位,注释掉以后,程序像是跑飞了。。}

下面是部分PHP页面代码

$con = mysql_connect("localhost","root","cyx30");

if (!$con) { die('Could not connect: ' . mysql_error()); }

mysql_select_db("my_db", $con);

if($_POST["require"]=="全部留言")

{$result = mysql_query("SELECT * FROM liuyan");

echo "

留言者留言时间联系邮箱留言状态查看详情

while($row = mysql_fetch_array($result))

{ echo "

"; echo "" . $row['Guest_Name'] . "";

echo "

" . $row['shijian'] . "";

echo "

" . $row['Guest_Email'] . "";

if($row['zhuangtai']=='1')

{ echo "

已处理"; }

elseif($row['zhuangtai']=='0')

{ echo "

未处理"; }

else {echo "

" . $row['zhuangtai'] . ""; }

echo "

";

echo "

"; }

echo "

";}

mysql_close($con);

?>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用 Ajax 实现较为复杂页面部分更新的完整 HTML 代码示例: ```html <!DOCTYPE html> <html> <head> <title>Ajax Demo</title> <script> function updateContent() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var data = JSON.parse(this.responseText); var posts = data.posts; var users = data.users; var postList = document.getElementById("post-list"); postList.innerHTML = ""; for (var i = 0; i < posts.length; i++) { var post = posts[i]; var user = users[post.userId]; var postItem = document.createElement("div"); postItem.className = "post-item"; var title = document.createElement("h2"); title.innerHTML = post.title; var author = document.createElement("p"); author.innerHTML = "作者:" + user.name; var content = document.createElement("p"); content.innerHTML = post.body; postItem.appendChild(title); postItem.appendChild(author); postItem.appendChild(content); postList.appendChild(postItem); } } }; xmlhttp.open("GET", "data.php", true); xmlhttp.send(); } </script> <style> .post-item { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } h2 { margin-top: 0; margin-bottom: 5px; } p { margin-top: 0; margin-bottom: 10px; } </style> </head> <body> <h1>Ajax Demo</h1> <p>点击下面的按钮,使用 Ajax 获取数据并更新页面</p> <button onclick="updateContent()">更新内容</button> <div id="post-list"> <!-- 初始内容为空 --> </div> </body> </html> ``` 在上面的代码中,当点击 "更新内容" 按钮时,会使用 Ajax 发送 GET 请求到 "data.php" URL,获取数据并更新页面中 id 为 "post-list" 的元素。数据返回的格式为 JSON,包含两个部分:posts 和 users。通过遍历 posts 和 users,创建相应的 HTML 元素并更新到页面中。 在实际应用中,需要根据具体需求修改 URL 和数据处理方式,并根据页面布局和样式修改 HTML 和 CSS。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值