千峰jQuery 【Ajax】

最新推荐文章于 2024-07-17 19:21:45 发布

赤焰梦

最新推荐文章于 2024-07-17 19:21:45 发布

阅读量212

点赞数 1

分类专栏： HTML/CSS/Javascript 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/m0_49442965/article/details/129036444

版权

HTML/CSS/Javascript 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

GET POST PUT

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jQuery/jQuery.min.js"></script>
  </head>
  <body>
    <button id="myget">get</button>
    <button id="mypost">post</button>
    <button id="myput">put</button>
    <button id="mypatch">patch</button>
    <button id="mydel">delete</button>
  </body>
  <script>
    $("#myget").click(function () {
      $.ajax({
        url: "http://localhost:3000/users",
        data: {
          name: "xiaoming",
        },
        success: function (res) {
          console.log(res);
        },
        error: function (err) {
          console.log(err);
        },
      });
    });

    $("#mypost").click(function () {
      $.ajax({
        url: "http://localhost:3000/users",
        data: {
          username: "xiaoming",
          sex: "woman",
        },
        method: "POST",
        success: function (res) {
          console.log(res);
        },
        error: function (err) {
          console.log(err);
        },
      });
    });

    $("#myput").click(function () {
      $.ajax({
        url: "http://localhost:3000/users/4",
        data: {
          username: "xiaohong",
          sex: "woman",
        },
        method: "PUT",
        success: function (res) {
          console.log(res);
        },
        error: function (err) {
          console.log(err);
        },
      });
    });
  </script>
  <!-- 注意,在json文件中id值不用加双引号,否则数字就会变成字符串格式显示 -->
</html>

JSON：

{
  "users": [
    {
      "name": "xiaoming",
      "sex": "man",
      "id": 1
    },
    {
      "name": "xiaoming1",
      "sex": "man",
      "id": 2
    },
    {
      "name": "xiaoming2",
      "sex": "man",
      "id": 3
    },
    {
      "username": "xiaohong",
      "sex": "woman",
      "id": 4
    },
    {
      "username": "xiaoming",
      "sex": "woman",
      "id": "xao3uwU"
    },
    {
      "username": "xiaoming",
      "sex": "woman",
      "id": "SHmpbO8"
    },
    {
      "username": "xiaoming",
      "sex": "woman",
      "id": 5
    },
    {
      "username": "xiaoming",
      "sex": "woman",
      "id": 6
    },
    {
      "username": "xiaoming",
      "sex": "woman",
      "id": 7
    }
  ],
  "lists": [
    "111",
    "222",
    "333"
  ]
}

promise写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jQuery/jQuery.min.js"></script>
  </head>
  <body>
    <button id="myget">get</button>
    <button id="mypost">post</button>
    <button id="myput">put</button>
    <button id="mypatch">patch</button>
    <button id="mydel">delete</button>
  </body>
  <script>
    $("#myget").click(function () {
      // $.ajax({
      //   url: "http://localhost:3000/users",
      //   data: {
      //     name: "xiaoming",
      //   },
      // })
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });

      // 简易写法：
      $.get(
        "http://localhost:3000/users",
        {
          name: "xiaoming",
        }
        // function (res) {
        //   console.log(res);
        // }
      ).then((res) => {
        console.log(res);
      });
    });

    $("#mypost").click(async function () {
      var res = await $.ajax({
        url: "http://localhost:3000/users",
        data: {
          username: "xiaoming",
          sex: "woman",
        },
        method: "POST",
      });
      console.log(res);
    });

    $("#myput").click(function () {
      $.ajax({
        url: "http://localhost:3000/users/4",
        data: {
          username: "xiaohong",
          sex: "woman",
        },
        method: "PUT",
        success: function (res) {
          console.log(res);
        },
        error: function (err) {
          console.log(err);
        },
      });
    });
  </script>
  <!-- 注意,在json文件中id值不用加双引号,否则数字就会变成字符串格式显示 -->
</html>

loading加载：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jQuery/jQuery.min.js"></script>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    ul li {
      list-style: none;
      padding: 10px;
      /* 清除浮动 */
      overflow: hidden;
    }
    img {
      width: 200px;
      float: left;
    }
    #loading {
      width: 100%;
      height: 100%;
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
    }
    /* 也可以找一张动图当做加载 */
    #loading div img {
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      top: 0;
      margin: auto;
      bottom: 0;
      right: 0;
      font-size: 20px;
    }
  </style>
  <!-- 钩子函数要加的足够靠前 -->
  <script>
    $(window).ajaxSend(function () {
      console.log("显示loading");
      $("#loading").css("display", "block");
    });

    $(window).ajaxComplete(function () {
      console.log("隐藏loading");
      $("#loading").css("display", "none");
    });

    $(window).ready(function () {
      console.log("jquery的钩子");
      $("#list").empty();
    });
  </script>
  <body>
    <button id="btn1">第一页</button>
    <button id="btn2">第二页</button>
    <button id="btn3">第三页</button>
    <ul id="list"></ul>
    <div id="loading">
      <div><img src="../img/1.gif" alt="" /></div>
    </div>
  </body>
  <script>
    // $(window).ajaxStart(function () {
    //   console.log("显示loading");
    // });
    // // 默认显示第一页
    // getList(1);
    // $(window).ajaxStop(function () {
    //   console.log("隐藏loading");
    // });
    // loading可以让用户耐心等待,不再点击按钮,降低服务器的压力

    // 默认显示第一页
    getList(1);
    function getList(num) {
      $.ajax({
        // 显示loading
        url: `https://m.maizuo.com/gateway?cityId=410100&pageNum=${num}&pageSize=3&type=2&k=9539570`,
        //   即便不要求同源,后端也会有自己的请求头验证：
        headers: {
          "X-Client-Info":
            ' {"a":"3000","ch":"1002","v":"5.2.1","e":"16760061975909780510015489","bc":"410100"}',

          "X-Host": " mall.film-ticket.film.list",
        },
        success: function (res) {
          console.log(res.data.films);
          render(res.data.films);
          //隐藏loading
        },
      });
    }
    function render(list) {
      var newList = list.map(
        (item) => `
      <li>
        <img src="${item.poster}"/>
        <h3>${item.name}</h3>
        <div>国家：${item.nation}</div>
        </li>`
      );
      $("#list").html(newList.join(" "));
    }

    $("#btn1").click(function () {
      getList(1);
    });
    $("#btn2").click(function () {
      getList(2);
    });
    $("#btn3").click(function () {
      getList(3);
    });
  </script>
</html>