ajax调用php函数_javascript和php[通俗易懂]

大家好，欢迎来到IT知识分享网。

最近又在拍黄片（PHP）了，女主Ajax前来捧场。

让我们进入片场看看~

= =进入正题。

度娘科普：AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX不是语言，是一种基于Javascript的开发技术。

应用的实现基于wamp搭建的本地服务器。

程序框架。

// index.html部分

0. 用户表单输入。 1.ajax处理表单（具体流程在代码注释给出）

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Html Form.</title>
    <meta http-equiv= "Content-Type" content = "text/html"; charset="utf-8">
</head>
<body>
     <h2>Stuff Personal Message Search.</h2>
     <label>Please input the ID.</label><br>
     <input type="text" name="keyword" id="keyword">   <!-- input的id属性，将用于ajax的getElementById()的索引 -->
     <button id="search">Search</button>
     <p id="searchResult"></p> 
     <h2>Create Staff</h2>
     <label>Name:</label>
     <input type="text" name="staffName" id="staffName">
     <label>ID:</label>
     <input type="text" name="staffNumber" id="staffNumber">
     <label>Sex:</label>
     <select id="staffSex">
         <option>male</option>
         <option>female</option>
     </select> 
     <button id="save">Save</button>
     <p id="createResult"></p>
<script type="text/javascript">
    document.getElementById("search").onclick=function()
    {
        //发送Ajax查询请求并处理
        //XMLHttpRequest用于客户端与服务器传输url信息的接口类
        //XHR提供了不用刷新网页并从url检索部分信息的功能
        //XHR在Ajax编程中被广泛运用（几乎所有Ajax程序都需要XHR的帮助）
        var request = new XMLHttpRequest();
        //顾名思义，open()方法以GET(PHP)的传递形式，将url传递给service.php
        request.open("GET","service.php?number="+document.getElementById("keyword").value); 
        request.send();
        request.onreadystatechange = function()
        {
                // readyState属性
                // 0 ：请求未初始化  1 ： 服务器已经建立，open已调用   2 ：请求已接受
                // 3 ：请求处理中    4 ： 请求已完成，且成功响应    详见 developer.mozilla.org
            if( request.readyState === 4 ){  
                if( request.status === 200 ){ //以数字形式返回http状态码，request未完成或者出现错误时 返回值为0
                    //responseText将在searchResult处生成HTML代码
                    document.getElementById("searchResult").innerHTML = request.responseText;
                }
                else{//弹窗生成警告信息
                    alert("发生错误"+request.status);
                }
            }
        }
  
    }

    document.getElementById("save").onclick=function()
    {
        var request = new XMLHttpRequest();
        request.open("POST","service.php"); 
        var data = "name=" + document.getElementById("staffName").value + "&number=" +document.getElementById("staffNumber").value
                   + "&sex=" + document.getElementById("staffSex").value;
         //将data数据设置在request请求的url中，详见 developer.mozilla.org
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        request.send(data);
        request.    ge = function()
        {
            if( request.readyState === 4 ){
                if( request.status === 200 ){  
                    document.getElementById("createResult").innerHTML = request.responseText;
                }
                else{
                    alert("发生错误"+request.status);
                }
            }
        }
  
    }
</script>
</body>
</html>

index.html

//service.php部分

0. GET形式传递时，检索。POST形式传递时，创建。

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Service</title>
</head>
<body>
  <?php
     $staff = array( array("name" => "hongQi","number" => "101","sex" => "male"),
                      array("name" => "guoJing","number" => "102","sex" => "male" ),
                      array("name" => "huangRong","number" => "103","sex" => "female") );
    
      if( $_SERVER["REQUEST_METHOD"] == "GET" ){
           search();
      }           
      else if( $_SERVER["REQUEST_METHOD"] == "POST" ){
             create();
      }   

      function search(){
          if( !isset($_GET["number"]) || empty($_GET["number"]) ){
               echo "参数错误";
               return ;
          }
          global $staff;

          $number = $_GET["number"];
          $result = "not found the staff";

          foreach ($staff as $value) {
                if( $value["number"] == $number ){
                     $result = "Found the staff--Id:".$value["number"]." Name: ".$value["name"]." Sex: ".$value["sex"];
                     break;
                }
          }
          echo $result;
      }

      function create(){
          if( !isset($_POST["name"])||empty($_POST["name"])||
              !isset($_POST["number"])||empty($_POST["number"])||
              !isset($_POST["sex"])||empty($_POST["sex"]) ){
              echo "parameter mistake";
            return ;
          }

          echo "Staff:".$_POST["name"]." save successfully!";
      }
  ?>
</body>
</html>

service.php

简单的 Ajax + PHP 就完成啦。

特别感谢。imooc慕课网的Ajax全接触课程。代码源自此课程。详细讲解可上慕课网查看。

后续更新。Ajax + PHP 实现域名查询程序。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/29287.html

ajax调用php函数_javascript和php[通俗易懂]

相关推荐

发表回复