如何在PHP和jQuery中使用AJAX

最新推荐文章于 2024-07-18 10:00:11 发布

cunjie3951

最新推荐文章于 2024-07-18 10:00:11 发布

阅读量729

点赞数

文章标签： ajax python java javascript vue ViewUI

今天，我们将探讨PHP的AJAX概念。 AJAX技术可帮助您改善应用程序的用户界面并增强整体最终用户体验。

什么是AJAX？

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

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

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

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

整个AJAX调用的工作原理如下：

让我们快速完成通常的AJAX流程：

首先，用户像往常一样打开一个带有同步请求的网页。
接下来，用户单击DOM元素（通常是按钮或链接），该元素会向后端服务器发起异步请求。最终用户不会注意到这一点，因为调用是异步进行的，并且不会刷新浏览器。但是，您可以使用Firebug之类的工具发现这些AJAX调用。
响应于AJAX请求，服务器可以返回XML，JSON或HTML字符串数据。
使用JavaScript解析响应数据。
最后，解析的数据将在网页的DOM中更新。

因此，您可以看到，使用来自服务器的实时数据更新了网页，而无需重新加载浏览器。

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

AJAX如何使用Vanilla JavaScript工作

在本节中，我们将看到AJAX如何在原始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>

让我们看一下上面的代码，以了解幕后发生的事情。

首先，我们初始化XMLHttpRequest对象，该对象负责进行AJAX调用。
XMLHttpRequest对象具有readyState属性，并且该属性的值在请求生命周期中会更改。它可以包含四个值之一： OPENED ， HEADERS_RECEIVED ， LOADING和DONE 。
我们可以使用onreadystatechange属性为状态更改设置侦听器功能。这就是我们在上面的示例中所做的事情：我们使用了一个函数，该函数在每次更改state属性时都会被调用。
在该函数中，我们检查了readyState值是否等于4 ，这意味着请求已完成，并且服务器已收到响应。接下来，我们检查了状态码是否等于200 ，这意味着请求成功。最后，我们获取存储在XMLHttpRequest对象的responseText属性中的responseText 。
设置侦听器之后，我们通过调用XMLHttpRequest对象的open方法来发起请求。调用之后， readyState属性值将设置为1。
最后，我们调用了XMLHttpRequest对象的send方法，该对象实际上将请求发送到服务器。调用之后， readyState属性值将设置为2。
服务器响应时，它将最终将readyState值设置为4，您应该看到一个警告框，显示来自服务器的响应。

这就是AJAX与原始JavaScript一起工作的方式。当然，这是一个演示AJAX概念的非常简单的示例，由于您需要处理许多不同的成功和失败方案，因此在现实世界中的应用程序可能会变得非常复杂。因此，最好选择一个JavaScript库来隐藏浏览器特定的复杂性！

在下一节中，我们将看到如何使用jQuery库执行AJAX调用。

AJAX如何使用jQuery库工作

在上一节中，我们讨论了如何使用原始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代码段，该代码段遵循我们上面看到的轮廓。

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

我们还要看看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响应。

结论

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

如果您有任何疑问或疑问，请随时使用下面的提要来表达您的想法！

翻译自: https://code.tutsplus.com/tutorials/how-to-use-ajax-in-php-and-jquery--cms-32494

cunjie3951

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何在PHP和jQuery中使用AJAX

今天，我们将探讨PHP的AJAX概念。 AJAX技术可帮助您改善应用程序的用户界面并增强整体最终用户体验。什么是AJAX？ AJAX代表异步JavaScript和XML，它使您可以异步地从后端服务器获取内容，而无需刷新页面。因此，它使您无需重新加载即可更新网页的内容。让我们看一个示例，以了解如何在日常应用程序开发中使用AJAX。假设您要构建一个页面来显示用户的个人资料信息，并...
复制链接

扫一扫