" />

c语言编程笔录

首页 >   > 笔记大全

笔记大全

PHP编程中有哪些常见的Ajax操作

更新时间：2023-10-30

PHP Ajax 操作

1. Ajax 改变内容

这个操作用于从服务器加载新内容，并替换文档中的某个元素。这个操作也可以称为局部刷新。

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax 改变内容</title>
  </head>
  <body>
    
    <button onclick="showHint()">获取新内容</button>
    <p id="txtHint">原内容</p>

    <script>
      function showHint() {
        var xmlhttp, url="gethint.php", txt="";
        if (window.XMLHttpRequest) {
          xmlhttp=new XMLHttpRequest();
        } else {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
          if (this.readyState==4 && this.status==200) {
            document.getElementById("txtHint").innerHTML=this.responseText;
          }
        };
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
      }
    </script>	

  </body>
  </html>

2. Ajax 异步上传文件

这个操作用于异步上传文件，并在上传过程中提供进度条。

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax 异步上传文件</title>
  </head>
  <body>
    
    <input type="file" id="myfile">
    <br><br>
    <button onclick="uploadFile()">上传</button>
    <br><br>
    <progress id="myprogress" value="0" max="100"></progress>

    <script>
      function uploadFile() {
        var file=document.getElementById("myfile").files[0];
        var url="upload.php";
        var form=new FormData();
        form.append("myfile",file);
        var xhr=new XMLHttpRequest();

        xhr.upload.addEventListener("progress",function(event){  
          if (event.lengthComputable) {  
            var percentComplete=event.loaded / event.total * 100;  
            document.getElementById("myprogress").value=percentComplete.toFixed(0);  
          }  
        }, false);  

        xhr.onreadystatechange=function(){
          if (xhr.readyState==4 && xhr.status==200){
            alert(xhr.responseText);
          }
        };
        xhr.open("POST", url, true);
        xhr.send(form);   
      }
    </script>	

  </body>
  </html>

3. Ajax 自动完成功能

这个操作在用户输入时，动态展示一些匹配结果。可以看做是搜索框。

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax 自动完成功能</title>
  </head>
  <body>
    
    <form>
      <input type="text" id="txt1" onkeyup="showHint(this.value)">
    </form>
    <p>匹配结果：</p>
    <ul id="txtHint"></ul>

    <script>
      function showHint(str) {
        var xmlhttp, url="gethint.php?q=" + str;
        if (str.length==0) { 
          document.getElementById("txtHint").innerHTML="";
          return;
        }
        if (window.XMLHttpRequest) {
          xmlhttp=new XMLHttpRequest();
        } else {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
          if (this.readyState==4 && this.status==200) {
            document.getElementById("txtHint").innerHTML=this.responseText;
          }
        };
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
      }
    </script>	

  </body>
  </html>

4. Ajax 多级联动菜单

这个操作用于动态加载下一级菜单，是非常流行的用户交互方式。

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax 多级联动菜单</title>
  </head>
  <body>
    
    <form>
      <select name="province" onchange="showCity(this.value)">
        <option>请选择省份</option>
        <option value="GD">广东省</option>
        <option value="HB">河北省</option>
      </select>

      <select name="city" onchange="showDistrict(this.value)">
        <option>请选择城市</option>
      </select>

      <select name="district">
        <option>请选择地区</option>
      </select>
    </form>

    <script>
      function showCity(str) {
        var xmlhttp, url="getcity.php?province=" + str;
        if (str.length==0) { 
          document.getElementsByName("city")[0].innerHTML="<option>请选择城市</option>";
          document.getElementsByName("district")[0].innerHTML="<option>请选择地区</option>";
          return;
        }
        if (window.XMLHttpRequest) {
          xmlhttp=new XMLHttpRequest();
        } else {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
          if (this.readyState==4 && this.status==200) {
            document.getElementsByName("city")[0].innerHTML=this.responseText;
            document.getElementsByName("district")[0].innerHTML="<option>请选择地区</option>";
          }
        };
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
      }

      function showDistrict(str) {
        var xmlhttp, url="getdistrict.php?city=" + str;
        if (str.length==0) { 
          document.getElementsByName("district")[0].innerHTML="<option>请选择地区</option>";
          return;
        }
        if (window.XMLHttpRequest) {
          xmlhttp=new XMLHttpRequest();
        } else {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
          if (this.readyState==4 && this.status==200) {
            document.getElementsByName("district")[0].innerHTML=this.responseText;
          }
        };
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
      }
    </script>	

  </body>
  </html>

以上是 PHP Ajax 常见操作示例。

图文推荐