教程 jquery tutorial

AJAX 简介

AJAX(Asynchronous JavaScript and XML)是一种无需重新加载页面即可与服务器交换数据并更新页面部分内容的技术。jQuery 对 AJAX 进行了封装,使其更简单易用。

jQuery 中的 AJAX 方法

jQuery 提供多种 AJAX 方法,常用的包括:

  • $.ajax():最灵活通用的方法
  • $.get():发送 GET 请求
  • $.post():发送 POST 请求
  • $.getJSON():获取 JSON 数据

优点

  • 页面无需刷新即可更新数据
  • 提升用户体验和应用响应速度
  • 易于与后端接口对接

示例:使用 $.get() 请求数据

假设 data.json 内容如下:

json
{ "message": "你好,这是来自服务器的消息!" }
在线代码演示
源码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    $("#loadBtn").click(function () {
      $.get("/data.json", function (data) {
        $("#result").text("服务器返回数据:" + data.message);
      });
    });
  });
</script>

<button id="loadBtn">获取服务器数据</button> <div id="result" style="margin-top: 10px"></div>