当前位置：首页 > PHP教程 > php高级应用 > 列表

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

发布:smiling　来源: PHP粉丝网 　添加日期：2022-02-15 10:28:16　浏览: 评论：0　

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

方法一：

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

1.html代码如下：

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

add.php代码如下：

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

方法二：

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

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

方法三：

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

方法四：

利用iframe的特性

2.html代码如下：

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

ret.php代码如下：

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

我们通过设置form提交的target到iframe，使表单无跳转。

ajax能实现文件上传吗？

分析，文件上传，是需要客户端把文件内容发送到服务器，也就是XHR对象在POST数据时，把文件内容也发送给服务器。

也就是XHR对象能够获取你要上传的文件内容，但是出于安全的考虑，JS是无法获取本地文件内容的。

ajax插件是如何实现文件上传的？

1、iframe

2、flash实现，如swfupload

3、html5 (添加了文件读取api，使ajax上传文件成为可能。)

Tags: php无刷新操作

分享到：

推荐文章

热门文章

最新评论文章