AJAX - JQuery

最新推荐文章于 2024-09-11 17:09:49 发布

浮六

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量958

点赞数

文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/qq_45346547/article/details/124547326

版权

<!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>Jquery</title>
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
  </head>
  <body>
    <button>GET</button>
    <button>POST</button>
    <button>通用型方法</button>
  </body>
  <script>
    $("button")
      .eq(0)
      .click(function () {
        $.get(
          "http://127.0.0.1:8000/jquery-server",
          { a: 100, b: 200 },
          function (data) {
            console.log(data);
          },
          "json"
        );
      });
    $("button")
      .eq(1)
      .click(function () {
        $.post(
          "http://127.0.0.1:8000/jquery-server",
          { a: 100, b: 200 },
          function (data) {
            console.log(data);
          }
        );
      });
    $("button")
      .eq(2)
      .click(function () {
        $.ajax({
          //url
          url: "http://127.0.0.1:8000/jquery-server",
          //参数
          data: { a: 100, b: 200 },
          //请求类型
          type: "GET",
          //响应体结果
          dataType: "JSON",
          //成功的回调
          success: function (data) {
            console.log(data);
          },
          //失败的回调
          timeout: 2000,
          error: function () {
            console.log("出错啦");
            //头信息
            headers: {
              c:200,
              d: 400
            }
          },
        });
      });
  </script>
</html>