微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > jquery中的ajax方法使用

博主信息

博文 62

粉丝 7

访问量 74179

专题推荐

更多>

jquery中的ajax方法使用

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML），AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

1. jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

 // 1. load(): 加载html片断
  $("button:first-of-type").click(function () {
    $(this).after("<div>").next().load("nav.html");
  });

2. jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。GET 基本上用于从服务器获得（取回）数据。POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

注释：GET 方法可能返回缓存数据。

// 2. $.get():以get方式从服务器获取资源/数据
  $("button:nth-of-type(2)").click(function (ev) {
    //    $.get(url, data, callback)
    $.get("users.php", { id: 2 }, function (data) {
      //   cl(data);
      $(ev.target).after("<div>").next().html(data);
    });
  });
  // 3. $.post():以post方式从服务器获取资源/数据
  $("button:nth-of-type(3)").click(function (ev) {
    //    $.post(url, data, callback)
    $.post("users.php", { id: 4 }, function (data) {
      //   cl(data);
      $(ev.target).after("<div>").next().html(data);
    });
  });

3. $.getJSON():接口返回的大多是JSON

$("button:nth-of-type(4)").click(function (ev) {
    //    $.getJSON(url, data, callback)
    $.getJSON("users.php?id=2", function (data) {
      // 返回就是js对象了, 不必转换
      //   cl(JSON.parse(data));
      cl(data);
      var res = data.id + ": " + data.name + ", " + data.age + "岁";
      $(ev.target).after("<div>").next().html(res);
    });
  });

4. $.ajax(): 终级方法

语法

//   $.ajax({
  //     // 请求类型
  //     type: "GET",
  //     // 请求的URL
  //     url: url,
  //     // 发送的数据
  //     data: data,
  //     // 期望服务器返回/响应的数据类型
  //     dataType: "json",
  //     // 成功时的回调函数
  //     success: callback,
  //   });

$("button:nth-of-type(5)").click(function (ev) {
    $.ajax({
      type: "GET",
      url: "users.php",
      data: { id: 10 },
      dataType: "html",
      success: function (data) {
        $(ev.target).after("<div>").next().html(data);
      },
    });
  });

5. $.ajax()-jsonp-1:跨域请求

$("button:nth-of-type(6)").click(function (ev) {
    $.ajax({
      type: "GET",
      url: "http://php.edu/0522/test2.php?jsonp=?&id=1",
      dataType: "jsonp",
      success: function (data) {
        cl(data);
        var data = JSON.parse(data);
        cl(data);
        var data =
          "<p>" +
          data.title +
          "</p><p>" +
          data.user.name +
          ", 邮箱:" +
          data.user.email +
          "</p>";
        $(ev.target).after("<div>").next().html(data);
      },
    });
  });

6. $.ajax()-jsonp-2:跨域请求

$("button:last-of-type").click(function (ev) {
    $.ajax({
      type: "GET",
      url: "http://php.edu/0522/test2.php?jsonp=?&id=2",
      dataType: "jsonp",
      jsonpCallback: "handle",
    });
  });
  function handle(data) {
    cl(data);
    var data = JSON.parse(data);
    cl(data);
    var data =
      "<p>" +
      data.title +
      "</p><p>" +
      data.user.name +
      ", 邮箱:" +
      data.user.email +
      "</p>";
    $("button:last-of-type").after("<div>").next().html(data);
  }

7. ajax分页案例

7.1 获取数据库（原生）

<?php
// 1. 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=php', 'root', 'root');
// 2. 获取页码
$page = $_POST['page'] ?? 1;
// 3. 每页显示数量
$num = 8;
// 4. 每页显示偏移量
$offset = ($page - 1) * $num;
// 5. 总页数
$sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `staffs`";
// echo $sql;
$pages = $pdo->query($sql)->fetch()['total'];
// echo $pages;
// 6. 分页数据
$sql = "SELECT * FROM `staffs` LIMIT {$num} OFFSET {$offset}";
$staffs = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
// print_r($staffs);
// ajax分页数据一定是返回二部分
// 1. 总页数, 提供给前端自动生成分页条
// 2. 分页数据
echo json_encode(['pages' => $pages, 'staffs' => $staffs]);
die;

7.2 分页数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="lib/jquery-3.5.1.js"></script>
    <title>Ajax无刷新分页技术</title>
    <style>
      table {
        border-collapse: collapse;
        border: 1px solid;
        text-align: center;
        margin: auto;
        width: 500px;
      }
      table caption {
        font-size: 1.2rem;
        margin-bottom: 10px;
      }
      th,
      td {
        border: 1px solid;
        padding: 5px;
      }
      thead tr:first-of-type {
        background-color: #ddd;
      }
      p {
        text-align: center;
      }
      p a {
        text-decoration: none;
        border: 1px solid;
        padding: 0 8px;
      }
      .active {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        员工信息表
      </caption>
      <thead>
        <tr>
          <th>id</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>职位</th>
          <th>手机号</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!-- 分页条 -->
    <p></p>
  </body>
  <script>
    // 默认是第1页
    var page = 1;
    // 默认显示第一页,用一个函数来实现显示
    getPageData(page);
    // 分页函数
    function getPageData(page) {
      // ajax无刷新分页
      $.ajax({
        type: "post",
        url: "page_data.php",
        data: { page: page },
        dataType: "json",
        success: show,
      });
    }
    // 数据显示函数
    function show(data) {
      // 1. 显示表格数据
      console.log(data);
      console.log(data.pages);
      console.log(data.staffs);
      var str = "";
      data.staffs.forEach(function (staff) {
        str += "<tr>";
        str += "<td>" + staff.id + "</td>";
        str += "<td><input type='text' value=" + staff.name + "></td>";
        str += "<td>" + staff.age + "</td>";
        str += "<td>" + staff.sex + "</td>";
        str += "<td>" + staff.position + "</td>";
        str += "<td>" + staff.mobile + "</td>";
        str += "</tr>";
      });
      //   $("tbody").append(str);
      $("tbody").html(str);
      // 2. 显示分页条
      var str = "";
      for (var i = 1; i <= data.pages; i++) {
        // $("<a>").attr("href", "").attr("data-index", i).html(i).appendTo("p");
        str += '<a href="" data-index=' + i + ">" + i + "</a>";
      }
      // 将页码添到分页条, 并将第一个置为高亮
      $("p").html(str).find("a").first().addClass("active");
      // 分页条的点击事件
      $("p a").click(function (ev) {
        // 禁用<a>的跳转默认行为
        ev.preventDefault();
        var page = $(this).attr("data-index");
        $("tbody").html("");
        getPageData(page);
      });
    }
  </script>
</html>