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

下面是关于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技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 原生JavaScript实现拖动校验功能

    这里是原生JavaScript实现拖动校验功能的完整攻略。 1. 准备工作 在实现拖动校验功能之前,需要准备以下几项工作。 1.1 HTML结构 首先,需要在HTML中创建一个<ul>列表,每条列表项包含一个可拖动的元素,如下所示: <ul id="drag-items"> <li class="d…

    JavaScript 2023年6月10日
    00
  • JavaScript中数组去除重复的三种方法

    以下是“JavaScript中数组去除重复的三种方法”的完整攻略。 方法一:使用双重循环 算法思路 使用一个外层循环遍历数组元素,然后在外层循环内部再嵌套一个内层循环遍历前面的元素,依次与当前元素比较,如果有相同的就将其删除。 代码示例 function unique1(arr) { for (var i = 0; i < arr.length; i+…

    JavaScript 2023年5月27日
    00
  • 利用javascript判断文件是否存在

    利用JavaScript判断文件是否存在的攻略包含以下几个步骤: 1.构造XMLHttpRequest对象;2.指定文件地址,使用HEAD方法进行异步请求;3.根据请求结果判断文件是否存在。 在具体实现时,可以按照以下步骤进行: 第一步:构造XMLHttpRequest对象 var xhr = new XMLHttpRequest(); 第二步:指定文件地址…

    JavaScript 2023年5月27日
    00
  • js常用函数2008-8-16整理第1/2页

    题目提到的“js常用函数2008-8-16整理第1/2页”应该是某个网站或者博客上的一个文章或者介绍。在这里我会假设这个文章是一个Markdown文档。 详细讲解“js常用函数2008-8-16整理第1/2页”的完整攻略 1. 阅读文档 首先,我们需要仔细阅读这篇文章,确定其主要内容和结构。我们需要了解这篇文章介绍了哪些JavaScript常用函数,这些函数…

    JavaScript 2023年5月18日
    00
  • js promise 中使用 setTimeout 实现暂停执行的效果

    下面是使用 JavaScript Promise 和 setTimeout 实现暂停执行的攻略。 理解 Promise 在介绍 Promise 怎样结合 setTimeout 实现暂停执行的方法前,我们需要先理解 Promise 的基本概念。 Promise 是异步编程的一种解决方案,它代表了一个异步操作的最终完成或失败状态,并且提供了一组用于处理状态变化的…

    JavaScript 2023年6月11日
    00
  • javascript常用函数(2)

    当谈到JavaScript时,函数是其中最重要的概念之一。它允许我们将一坨代码封装在一起,并在需要时重复使用。在本篇文章中,我们将讨论一些常用的JavaScript函数,包括:Array.prototype.some、Array.prototype.find、Array.prototype.filter、setTimeout和setInterval。 Arr…

    JavaScript 2023年5月27日
    00
  • Javascript Math LN2 属性

    JavaScript中的Math.LN2属性是一个常数,表示自然对数中的2的对数值。以下是关于Math.LN2属性的完整攻略,包括两个示例。 JavaScript Math对象的LN2属性 JavaScript Math对象中的LN2属性是一个常数,表示自然对数中的2的对数值。 下面是LN2属性语法: Math.LN2 下面是一个LN2属性的示例: cons…

    JavaScript 2023年5月11日
    00
  • 关于js里的this关键字的理解

    关于JS中的this关键字 在JavaScript中,this关键字是一个非常重要的概念,有着不同的用法和含义。在不同的情况下它所代表的对象也不同,因此理解this的含义和使用场景显得非常重要。 this的指向 在JavaScript中,this表示当前函数的执行上下文。根据函数的调用方式不同,this指向的对象也不同。 通常来说,this的指向可以分为以下…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部