jquery ajax入门_jQuery AJAX入门指南

jquery ajax入门

在本系列的第一篇文章中，我们介绍了AJAX的基础知识。 在第二篇中 ，我们看了一个使用普通JavaScript的工作示例。

在本教程中，我们将逐步介绍jQuery的一些与AJAX相关的功能和方法 。 更具体地说，我们将仔细研究速记load方法和通用ajax函数。

使用load方法

jQuery的load方法是一种简单但功能强大的方法，用于获取远程数据。 在下面可以看到其语法：

$(selector).load(url[, data][, complete])

下表显示了其可能的参数：

参数	描述	需要
网址	包含请求发送到的URL的字符串。	是
数据	与请求一起发送到服务器的数据（字符串或纯对象）。	没有
完成	成功完成或未成功完成请求时执行的回调函数。	没有

这是回调函数的参数：

参数	描述
responseText	从请求中检索的数据。
textStatus	一个字符串，用于分类请求的状态。
jqXHR	jQuery XMLHttpRequest（jqXHR）对象，它是浏览器的本机XMLHttpRequest（XHR）对象的超集。

下面的列表总结了textStatus参数的可能值：

- success
  - notmodified
  - nocontent
  - error
  - timeout
  - abort
  - parsererror

为了更好地理解load方法的工作原理，让我们重新回顾上一教程中讨论的示例。

再看一下这个简单HTML结构：

   
   

        
    
    
        
    
    Learn more about Einstein
        
    
    

      
   
   
      

看起来是这样的：

请记住，单击按钮后，我们想用响应数据更新#bio元素的内容。

这是必需的jQuery代码：

var $btn = $('#request');
      var $bio = $('#bio');

      $btn.on('click', function() {
      	$(this).hide();
      	$bio.load('Bio.txt', completeFunction);
      });
    
      function completeFunction(responseText, textStatus, request) {
      	$bio.css('border', '1px solid #e8e8e8');
      	if(textStatus == 'error') {
      		$bio.text('An error occurred during your request: ' +  request.status + ' ' + request.statusText);
      	} 
      }

假设该请求是成功的（即当textStatus是success或notmodified ），最后的结果是这样的：

另外，请考虑以下描述成功请求的可视化：

如果我们使用纯JavaScript（请参阅前面的教程）发出请求，此可视化效果的左侧部分将显示XHR对象，该XHR对象在浏览器控制台中打印。 另一方面，如果我们使用load方法，则右侧部分将在打印时显示相应的jqXHR对象。

但是，如果请求失败，则会出现相应的消息。 为此，我们监视textStatus参数的值并显示错误消息：

注意：如果您从本地环境运行示例（并将Bio.txt文件存储在其中），则错误消息可能会有所不同。 例如，您可能会看到以下结果：

最后，值得一提的是，默认情况下，除非我们将数据作为对象发送到服务器，否则load方法使用HTTP GET方法。 只有这样，才会调用POST方法。

请参见下面的相关Codepen演示：

现在，让我们修改从服务器请求的文件格式。 具体地说，对于此示例，所需数据包含在Bio.html文件中，而不是Bio.txt文件中。 还值得注意的是：目标文件包含两个段落。

假设我们只想加载第一段，我们将必须更新初始代码，如下所示：

$btn.on('click', function() {
          // this line only changes
          $bio.load('Bio.html p:first-child', completeFunction);
      });

看起来是这样的：

这是Codepen演示：

结论

在本教程中，我演示了如何在jQuery中使用AJAX。 为了使事情变得更有趣，我们还处理了一些实际示例。 在本系列的最后一个教程中，我们将通过处理一个更复杂的示例来总结整个过程。

翻译自: https://webdesign.tutsplus.com/tutorials/a-beginners-guide-to-ajax-with-jquery--cms-25126

jquery ajax入门