📌  相关文章
📜  ajax 成功后刷新 div - Javascript (1)

📅  最后修改于: 2023-12-03 14:39:04.058000             🧑  作者: Mango

Ajax 成功后刷新 div - Javascript

在网站应用程序中，我们经常需要通过 Ajax 提交或获取一些数据。Ajax 可以在用户与网站交互时异步地更新页面内容，而无需重新加载整个页面。本文将介绍在 Ajax 成功后刷新 div 的方法，并提供代码实例。

HTML

在我们的 HTML 页面中，需要有一个目标 div 元素，其内容将在 Ajax 请求成功后更新。

<!DOCTYPE html>
<html>
  <head>
    <title>Ajax Refresh Div Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>
    <div id="myDiv">
      <!-- 初始内容 -->
      Initial content of myDiv
    </div>

    <button onclick="refresh()">Refresh</button>

    <script src="myScript.js"></script>
  </body>
</html>
Javascript

我们可以使用 jQuery 发起 Ajax 请求，并在请求成功后更新目标 div 元素的内容。以下是一个简单的示例：

function refresh() {
  $.ajax({
    url: "myData.php",
    type: "POST",
    data: { name: "John", location: "Boston" },
    success: function (response) {
      $("#myDiv").html(response); // 更新目标 div 元素内容
    },
  });
}

在上面的示例中，我们首先定义了一个名为 refresh 的函数。当用户单击页面上的“刷新”按钮时，该函数将被调用。函数内部使用 $.ajax() 方法发起 Ajax 请求。该方法需要传递一个参数对象，其中包含了我们需要发送的请求参数和请求类型，以及处理请求结果的回调函数。

在回调函数中，我们使用 jQuery 的 html() 方法获取服务器响应的内容，并将其用作目标 div 元素的新内容。这将导致目标 div 元素中的所有子元素都被替换为服务器响应的内容。

总结

使用 Ajax 可以使我们在不刷新整个页面的情况下更新页面内容。本文介绍了在成功后刷新 div 元素的方法，并提供了一个使用 jQuery 的示例。您可以根据自己的需求进行修改和扩展。

## 参考文献

- [jQuery AJAX Methods](https://www.w3schools.com/jquery/jquery_ajax_intro.asp)
- [jQuery HTML Methods](https://www.w3schools.com/jquery/jquery_dom_set.asp)