jQuery学习笔记之Ajax用法实例详解

2023年5月19日下午9:11 • JavaScript

当你需要从服务器异步获取数据、并且能够在不刷新页面的情况下动态更新网页内容时，Ajax是一种非常有用的技术。jQuery中的Ajax封装简单易用，本篇文章将详细讲解jQuery的Ajax用法。

Ajax简介

Ajax即"Asynchronous JavaScript and XML"（异步JavaScript和XML），是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax能够使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下更新部分网页内容，减少了页面的重载时间和带宽。

发送Ajax请求

jQuery的Ajax用法非常简单，只需要使用$.ajax()方法即可实现。下面是一个基本的Ajax请求示例：

$.ajax({
  type: "POST",
  url: "demo.php",
  data: { name: "John", age: 18 },
  success: function(response){
    alert(response);
  }
});

这个请求是向demo.php发送POST请求，并且发送了包含name和age两个参数的数据对象。当服务器返回响应时，弹出响应内容的提示框。

处理Ajax响应

Ajax请求成功时，服务器会返回一个响应，我们需要对这个响应进行处理。常见的处理方式有以下几种：

直接操作响应内容

直接操作响应内容，是指将响应内容直接插入到页面中的某个元素中。例如：

$.ajax({
  type: "GET",
  url: "demo.php",
  success: function(response){
    $("#result").html(response);
  }
});

这个请求是向demo.php发送GET请求，请求成功后，将响应内容直接插入到页面中id为result的元素中。

处理JSON格式响应

如果服务器返回的是JSON格式的响应，我们可以使用$.getJSON()方法来解析JSON数据。例如：

$.getJSON("demo.json", function(result){
  $.each(result, function(i, field){
    $("#result").append(field + " ");
  });
});

这个请求是向demo.json发送GET请求，请求成功后，将响应的JSON数据解析成一个包含多个字符串的数组，并将这些字符串依次插入到页面中。

示例

假设我们需要从服务器获取最新的新闻列表，并将这个列表展示在页面上，可以按照以下步骤进行：

编写服务器端代码

首先，需要编写服务器端代码来获取最新的新闻列表。以PHP为例，代码如下：

<?php

$newsList = array(
  array("title" => "这是新闻1的标题", "content" => "这是新闻1的内容......"),
  array("title" => "这是新闻2的标题", "content" => "这是新闻2的内容......"),
  array("title" => "这是新闻3的标题", "content" => "这是新闻3的内容......")
);

echo json_encode($newsList);

?>

这个代码将一个包含三条新闻的数组，转换成JSON格式然后输出。

发送Ajax请求

编写页面代码，使用jQuery发送Ajax请求并处理响应内容。代码如下：

$.getJSON("news.php", function(result){
  $.each(result, function(i, news){
    var itemHtml = "<div class='news-item'>" +
      "<h3 class='news-title'>" + news.title + "</h3>" +
      "<div class='news-content'>" + news.content + "</div>" +
      "</div>";
    $("#news-list").append(itemHtml);
  });
});

这个请求是向news.php发送GET请求，请求成功后，将响应的JSON数据解析成多个新闻项，并将这些新闻项渲染到页面上。