• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

如何在PHP和jQuery中使用AJAX

ngkoma • 2年前 (2022-05-15) • JavaScript

今天，我们将用 php 和 javascript 来探索 ajax 的概念。AJAX 技术可帮助您改进应用程序的用户界面并增强整体最终用户体验。

如何在 PHP 和 jquery 中使用 AJAX

什么是 AJAX？

AJAX 代表异步 JavaScript 和 XML，它允许您从后端服务器异步获取内容，而无需刷新页面。因此，它允许您更新网页的内容而无需重新加载它。

让我们看一个示例来了解如何在日常应用程序开发中使用 AJAX。假设您要构建一个显示用户个人资料信息的页面，其中包含个人信息、社交信息、通知、消息等不同部分。

通常的方法是为每个部分构建不同的网页。例如，用户会单击社交信息链接以重新加载浏览器并显示包含社交信息的页面。但是，这使得在部分之间导航变得更慢，因为用户必须等待浏览器重新加载并且每次页面重新呈现。

另一方面，您也可以使用 AJAX 构建一个无需刷新页面即可加载所有信息的界面。在这种情况下，您可以为所有部分显示不同的选项卡，并通过单击选项卡从后端服务器获取相应的内容并更新页面而无需刷新浏览器。这有助于您改善整体最终用户体验。

整个 AJAX 调用的工作方式如下：

如何在PHP和jQuery中使用AJAX 第1张

让我们快速浏览一下通常的 AJAX 流程：

  1. 首先，用户像往常一样使用同步请求打开网页。

  2. 接下来，用户点击一个dom元素——通常是一个按钮或链接——向后端服务器发起一个异步请求。最终用户不会注意到这一点，因为调用是异步进行的并且不会刷新浏览器。但是，您可以使用 Firebug 等工具发现这些 AJAX 调用。

  3. 作为对 AJAX 请求的响应，服务器可能会返回 XML、JSON 或 html 字符串数据。

  4. 使用 javaScript 解析响应数据。

  5. 最后，解析后的数据在网页的 DOM 中更新。

如您所见，网页使用来自服务器的实时数据进行更新，而无需重新加载浏览器。

在下一节中，我们将介绍如何使用 vanilla JavaScript 实现 AJAX。

AJAX 如何使用 Vanilla JavaScript 工作

在本节中，我们将了解 AJAX 如何在 vanilla JavaScript 中工作。当然，有一些可用的 JavaScript 库可以让 AJAX 调用变得更容易，但了解幕后发生的事情总是很有趣。

让我们看一下下面的普通 JavaScript 代码，它执行 AJAX 调用并异步从服务器获取响应。

<script>
var objXMLHttpRequest = new XMLHttpRequest();
objXMLHttpRequest.onreadystatechange = function() {
  if(objXMLHttpRequest.readyState === 4) {
    if(objXMLHttpRequest.status === 200) {
          alert(objXMLHttpRequest.responseText);
    } else {
          alert('Error Code: ' +  objXMLHttpRequest.status);
          alert('Error Message: ' + objXMLHttpRequest.statusText);
    }
  }
}
objXMLHttpRequest.open('GET', 'request_ajax_data.php');
objXMLHttpRequest.send();
</script>

让我们通过上面的代码来了解幕后发生的事情。

  1. 首先，我们初始化 XMLHttpRequest 负责进行 AJAX 调用的对象。

  2. 该 XMLHttpRequest 对象具有一个 readyState 属性，并且该属性的值在请求生命周期中会发生变化。它可以保存以下四个值之一：  OPENED、  HEADERS_RECEIVED、 LOADING和 DONE。

  3. onreadystatechange 我们可以使用该属性为状态更改设置监听器函数 。这就是我们在上面的示例中所做的：我们使用了一个函数，该函数将在每次更改 state 属性时调用。

  4. 在该函数中，我们检查了 readyState 值是否等于 4，这意味着请求已完成并且我们已从服务器获得响应。接下来，我们检查了状态码是否等于 200，这意味着请求成功。最后，我们获取存储在 对象responseText 属性中 的响应XMLHttpRequest 。

  5. 设置好监听器后，我们通过调用对象的 open 方法来 发起请求XMLHttpRequest 。此 readyState 调用后属性值将设置为 1。

  6. 最后，我们调用了 对象的send 方法 XMLHttpRequest ，它实际上将请求发送到服务器。此 readyState 调用后属性值将设置为 2。

  7. 当服务器响应时，它最终会将 readyState 值设置为 4，您应该会看到一个显示服务器响应的警报框。

这就是 AJAX 与 vanilla JavaScript 一起工作的方式。这里的方法，使用“回调函数”是编写 AJAX 的传统方式，但更简洁、更现代的方式是使用 Promises。

在下一节中，我们将看到如何将 Promise 对象用于 AJAX。

如何为 AJAX 使用 JavaScript Promise

JavaScript 中的 Promise 提供了一种更好的方法来管理依赖于其他回调的异步操作和回调。在 JavaScript 中， Promise 是一个可能具有以下三种状态之一的对象：待处理、已解决或已拒绝。最初， Promise 对象处于挂起状态，但随着异步操作完成，它可能会评估为已解决或已拒绝状态。

让我们用对象快速修改前面的例子 Promise 。

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

当 AjaxCallWithPromise 函数被调用时，它返回 promise 对象，并且它最初处于挂起状态。根据响应，它将调用 resolve or reject 函数。 

接下来，我们使用该 then 方法，该方法用于在成功解析 Promise 对象时安排回调。该 then 方法有两个参数。第一个参数是一个回调，它将在 promise 被解决时执行，第二个参数是拒绝状态的回调。

这就是您可以将 JavaScript Promises 用于 AJAX 的方式。在下一节中，我们将看到如何使用 jQuery 库来执行 AJAX 调用。

AJAX 如何使用 jQuery 库工作

在前面的部分中，我们讨论了如何使用 vanilla JavaScript 执行 AJAX 调用。在本节中，我们将使用 jQuery 库来演示这一点。我假设您了解 jQuery 库的基础知识。

jQuery 库提供了几种不同的方法来执行 AJAX 调用，尽管在这里我们将看一下 ajax 最常用的标准方法。

看看下面的例子。

<script>
$.ajax(
  'request_ajax_data.php',
  {
      success: function(data) {
        alert('AJAX call was successful!');
        alert('Data from the server' + data);
      },
      error: function() {
        alert('There was some error performing the AJAX call!');
      }
   }
);
</script>

如您所知， $ 符号用于引用 jQuery 对象。

该 ajax 方法的第一个参数是将在后台调用以从服务器端获取内容的 URL。第二个参数是 JSON 格式，允许您为 ajax 方法支持的一些不同选项指定值。

在大多数情况下，您需要指定成功和错误回调。成功完成 AJAX 调用后将调用成功回调。服务器返回的响应将传递给成功回调。另一方面，如果出现问题并且执行 AJAX 调用时出现问题，则会调用失败回调。

如您所见，使用 jQuery 库执行 AJAX 操作很容易。事实上，无论您选择使用哪个 JavaScript 库执行 AJAX 调用，该过程或多或少都是相同的。

在下一节中，我们将看到一个真实的示例来了解这一切如何与 PHP 一起工作。

一个使用 PHP 的真实 AJAX 示例

在本节中，我们将构建一个示例，该示例使用 AJAX 从服务器端的 PHP 文件中获取 JSON 内容。

出于演示目的，我们将构建一个使用 AJAX 和 jQuery 执行用户登录的示例。首先，让我们创建 index.php 文件，如下面的代码片段所示，它呈现了一个基本的登录表单。

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpguvvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<form id="loginform" method="post">
    <div>
        Username:
        <input type="text" name="username" id="username" />
        Password:
        <input type="password" name="password" id="password" />    
        <input type="submit" name="loginBtn" id="loginBtn" value="Login" />
    </div>
</form>
<script type="text/javascript">
$(document).ready(function() {
    $('#loginform').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'login.php',
            data: $(this).serialize(),
            success: function(response)
            {
                var jsonData = JSON.parse(response);
 
                // user is logged in successfully in the back-end
                // let's redirect
                if (jsonData.success == "1")
                {
                    location.href = 'my_profile.php';
                }
                else
                {
                    alert('Invalid Credentials!');
                }
           }
       });
     });
});
</script>
</body>
</html>

index.php文件是一个非常标准的  HTML 表单，其中包含用户名和密码字段。它还包含一个 jQuery JavaScript 片段，它遵循我们上面看到的大纲。

我们使用了 submit 表单元素的事件，当用户点击提交按钮时会触发该事件。在那个事件处理程序中，我们启动了 AJAX 调用，它  使用 POST 方法异步将表单数据提交到login.php文件。一旦我们收到来自服务器的响应，我们就会使用对象的 parse 方法 对其进行解析JSON 。最后，根据成功或失败，我们采取适当的行动。

让我们也看看 login.php 长什么样。

<?php
if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) {
    // do user authentication as per your requirements
    // ...
    // ...
    // based on successful authentication
    echo json_encode(array('success' => 1));
} else {
    echo json_encode(array('success' => 0));
}

login.php文件包含验证用户的  逻辑，并根据登录成功或失败返回 JSON 响应。

将 Promise 用于 AJAX 和 jQuery

除此之外，该 $.ajax 方法还支持 JavaScript Promises。它提供了不同的方法，例如 then,  done, fail 并且 always 您可以在 Promises 的上下文中使用这些方法。

让我们快速修改我们在示例中使用的 jQuery 片段，以展示如何将它与该 then 方法一起使用。

...
...
$.ajax({
    type: "POST",
    url: 'login.php',
    data: $(this).serialize()
}).then(
    // resolve/success callback
    function(response)
    {
        var jsonData = JSON.parse(response);

        // user is logged in successfully in the back-end
        // let's redirect
        if (jsonData.success == "1")
        {
            location.href = 'my_profile.php';
        }
        else
        {
            alert('Invalid Credentials!');
        }
    },
    // reject/failure callback
    function()
    {
        alert('There was some error!');
    }
);
...
...

结论

在本教程中，我们讨论了 AJAX 的基础知识以及它如何与 PHP 应用程序一起使用。在文章的前半部分，我们研究了 AJAX 在 vanilla JS 和 jQuery 库中的工作方式。在后半部分，我们构建了一个真实示例，演示了如何使用 AJAX 获取服务器端 PHP 内容



文章目录
  • AJAX 如何使用 Vanilla JavaScript 工作
  • 如何为 AJAX 使用 JavaScript Promise
  • AJAX 如何使用 jQuery 库工作
  • 一个使用 PHP 的真实 AJAX 示例
    • 将 Promise 用于 AJAX 和 jQuery
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何在PHP和jQuery中使用AJAX
    文章地址：https://www.weixiaolive.com/en/index.php/post/21.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云