Ajax 调用（jQuery）后如何更新 DOM

Ajax

如何使用 Ajax（jQuery）更新 DOM

在网页开发中，Ajax（Asynchronous JavaScript and XML）是一种重要的技术，它允许通过 JavaScript 异步地向服务器发送请求，并在不刷新整个页面的情况下更新部分页面内容。jQuery 是一个流行的 JavaScript 库，简化了 Ajax 的使用，让开发者能够更轻松地操作 DOM 和处理异步请求。

要使用 Ajax 调用并更新 DOM，首先需要了解如何发起 Ajax 请求，然后在请求成功时更新网页的特定部分。以下是一个简单的例子，演示了如何使用 jQuery 中的 $.Ajax() 方法来获取外部数据并更新 DOM 元素。

发起 Ajax 请求并更新 DOM

假设我们有一个按钮，点击按钮时会触发 Ajax 请求，并将返回的数据显示在页面上。首先，确保在 HTML 页面中引入 jQuery 库：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <Meta charset="UTF-8">
  <title>Ajax 更新 DOM</title>
  <script src="JS">https://code.jquery.com/jquery-3.6.0.min.JS</a>"></script>
</head>
<body>
<button id="loadDataBtn">加载数据</button>
<div id="dataContAIner"></div>
<script>
$(document).ready(function() {
  // 当按钮被点击时
  $('#loadDataBtn').click(function() {
    // 发起 Ajax 请求
    $.Ajax({
      url: 'https://api.example.com/data', // 替换为实际的 API 地址
      method: 'GET',
      success: function(response) {
        // 请求成功时更新 DOM
        $('#dataContAIner').html('
' + response + '
');
      },
      error: function(xhr, status, error) {
        // 处理错误情况
        console.error('发生错误:', status, error);
      }
    });
  });
});
</script>
</body>
</html>

在这个例子中，当页面加载完成后，jQuery 监听按钮的点击事件。每当按钮被点击时，$.Ajax() 方法将发送 GET 请求到指定的 API 地址。若请求成功，success 回调函数将会将返回的数据嵌入到具有 ID dataContAIner 的