php+ajax+json 详解及实例代码

2023年5月27日上午9:20 • JavaScript

下面是关于PHP+AJAX+JSON的详细讲解及实例代码的攻略。

PHP+AJAX+JSON 详解

什么是AJAX

AJAX全称为Asynchronons JavaScript and XML，是基于前端技术的一种异步交互方式。在AJAX出现之前，前端页面与服务端的交互方式主要是通过页面跳转、表单提交等方式。而AJAX则可以使得前端页面在不进行整个页面刷新的情况下与服务端进行数据交互，可以带来更好的用户体验。

什么是JSON

JSON全称为JavaScript Object Notation，是一种轻量级的数据交换格式。它基于JavaScript的语法规则，但是可以用于多种编程语言和数据格式之间的数据交换。JSON的好处在于它比XML等格式更加简洁、轻量级。

PHP+AJAX+JSON

PHP+AJAX+JSON可以使得前端通过AJAX请求服务端的PHP脚本，服务端返回JSON格式数据，再由前端进行解析和渲染。下面以两个简单的示例来说明这一过程。

示例1：实现简单的AJAX请求

以下是HTML代码部分，包含一个文本框和一个按钮：

<html>
<head>
  <script>
    function getHint(str) {
      if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
      } else {
        var xmlhttp = new XMLHttpRequest();    // 创建一个AJAX对象
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;
          }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);    
        xmlhttp.send();    // 发送请求
      }
    }
  </script>
</head>
<body>

  <h3>Start typing a name in the input field below:</h3>
  <form>
    First name: <input type="text" onkeyup="getHint(this.value)">
  </form>
  <p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

接下来是gethint.php脚本的内容：

<?php
// 获取q参数
$q = $_REQUEST["q"];

// 如果q参数不为空，则查询数据库
if ($q !== "") {
  $dbhost = "localhost";
  $dbuser = "root";
  $dbpass = "";
  $dbname = "testDB";
  // 创建数据库连接
  $conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

  if (!$conn) {
    die("Connection faild: " .mysqli_connect_error());
  }

  // 查询数据库数据
  $sql = "SELECT * FROM users WHERE firstname LIKE '".$q."%'";
  $result = mysqli_query($conn, $sql);

  // 根据查询结果生成建议列表
  if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
      echo "<p>" . $row["firstname"] . " " . $row["lastname"] . "</p>";
    }
  } else {
    echo "No suggestions";
  }

  mysqli_close($conn);
}

上述代码中，当用户输入姓名首字母后，就会发送一个GET请求到gethint.php脚本，该脚本根据查询到的结果返回JSON格式数据（或者无匹配结果时返回"No suggestions"）。

示例2：使用jQuery编写AJAX请求

jQuery是一种十分常用的JavaScript库，可以大大简化前端开发的工作量。下面是一个使用jQuery完成AJAX请求的简单示例：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $.ajax({
          url: "demo_ajax_json.php",    // 请求地址
          dataType: "json",           // 预期返回数据的类型
          success: function(result) {   // 请求成功后的回调函数
            $("#div1").html(result.firstname + " " + result.lastname);
          }
        });
      });
    });
  </script>
</head>
<body>

<button>Get JSON data</button>

<div id="div1"></div>

</body>
</html>

接下来是demo_ajax_json.php脚本：

<?php
// 返回JSON格式数据
header('Content-Type: application/json');

$arr = array('firstname' => "John", 'lastname' => "Doe");
echo json_encode($arr);
?>

上述代码中，当用户点击按钮时，会发送一个GET请求到demo_ajax_json.php脚本，该脚本返回JSON格式数据（{"firstname":"John","lastname":"Doe"}），前端页面通过jQuery解析后，显示在页面上。

结语

上述两个示例分别说明了如何通过PHP和jQuery发送AJAX请求，并接收/返回JSON格式数据。AJAX+JSON能够带来更好的用户体验，使得前端和后端的交互更加快捷高效。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：php+ajax+json 详解及实例代码 - Python技术站