php的无刷新操作实现方法分析

吾爱主题阅读：154 2021-09-30 13:43:00 评论：0

本文实例讲述了php的无刷新操作实现方法。分享给大家供大家参考，具体如下：

方法一：

我们通过http的204状态码，页面不跳转。

1.html代码如下：

1 2 3 4 5 6 7 8 9 10 <!DOCTYPE HTML> < html lang = "zh-CN" > < head > < meta charset = "UTF-8" > < title ></ title > </ head > < body > < a href = "./add.php" rel = "external nofollow" >投票</ a > </ body > </ html >

add.php代码如下：

1 2 3 4 5 6 <?php $num = file_get_contents ( './num.txt' ); $num = intval ( $num ) + 1; file_put_contents ( './num.txt' , $num ); header( 'HTTP/1.1 204 No Content' );

方法二：

利用图片加载的特性，来完成请求。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE HTML> <html lang= "zh-CN" > <head> <meta charset= "UTF-8" > <title></title> </head> <body> <input type= "button" value= "投票" id= "addBtn" /> <div id= "request" ></div> </body> <script type= "" > var addBtn = document.getElementById( "addBtn" ); addBtn.onclick = function () { //创建img标签 var img = document.createElement( "img" ); //设置标签src属性 img.setAttribute( "src" , "add.php" ); document.createElement( "request" ).appendChild(img); }; </script> </html>

方法三：

利用css，javascript的加载特性，完成请求，原理与img加载一样。

方法四：

利用iframe的特性

2.html代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> < html lang = "zh-CN" > < head > < meta charset = "UTF-8" > < title ></ title > </ head > < body > < form action = "ret.php" method = "post" target = "request" > 用户名：< input type = "text" name = "uname" value = "" /> 密码：< input type = "password" name = "upwd" value = "" /> < input type = "submit" name = "submit" value = "提交" /> </ form > < iframe width = "0" height = "0" frameborder = "0" name = "request" ></ iframe > < div id = "result" ></ div > </ body > </ html >

ret.php代码如下：

1 2 3 4 5 6 7 8 9 <?php $uname = ! empty ( $_POST [ 'uname' ]) ? $_POST [ 'uname' ] : '' ; $upwd = ! empty ( $_POST [ 'upwd' ]) ? $_POST [ 'upwd' ] : '' ; if ( $uname == 'admin' && $upwd == '123456' ) { echo "<script>parent.document.getElementById('result').innerHTML='OK';</script>" ; } else { echo "<script>parent.document.getElementById('result').innerHTML='NO';</script>" ; }