jQuery中的Ajax

jQuery中的Ajax

1.了解jQuery中的Ajax

浏览器中提供了 XMLHttpRequest用法比较复杂,所以jQuery对XMLHttpRequestv进行了封装,提供了一系列Ajax相关的函数,极大降低了Ajax的使用难度。

jQuery中发起Ajax请求最常用的三种方法如下:

$.get()  向服务器获取数据

$.post() 向服务器发送请求

$.ajax()既可以获取也可以发送数据

 

2.$.get()函数的语法

jQuery中$.get()函数的功能单一,专门用来发起get请求,从而将服务器上的资源请求到客户端来进行使用。

(1)$.get()函数的语法如下:

$.get(ur1,[data],[callback])

其中,三个参数各自代表 的含义如下:

 

 

 (2)$.get()发起不带参数的请求

使用$.get()函数发起不带参数的请求时,直接提供请求的URL地址和请求成功后的回调函数即可,实例代码如下:

复制代码
 <body>
    <button id="btnGET">发起不带参数的请求</button>
  </body>
//引入jquery   <script src="/js/jquery/jquery.min.js"></script> <script> $(function () { $("#btnGET").on("click", function () { $.get("http://www.liulongbin.top:3006/api/getbooks", function (res) { console.log(res); //这里表示res是服务器返回的数据 }); }); }); </script>
复制代码

 

 

 (3)$.get()发起带参数的请求

使用$.get()函数发起请求时,示例代码如下:

 

复制代码
  <body>
    <button id="btnGET">发起单参数的GET请求</button>
  </body>
  <script src="/js/jquery/jquery.min.js"></script>
  <script>
    $(function () {
      $("#btnGET").on("click", function () {
        $.get(
          "http://www.liulongbin.top:3006/api/getbooks",
          { id: 1 },
          function (res) {
            console.log(res);
          }
        );
      });
    });
  </script>
复制代码

 

 

 

 

3.$.post( )函数的语法

jQuery中$.post( ) 函数的功能单一,专用用来发起post请求,从而向服务器提交数据。

(1)$.post( )函数的语法如下:

$.post(url,[data],[callback])

 

其中,三个参数各自代表的含义如下:

 

 

 

(2)使用POST提交数据

复制代码
 <body>
    <button id="btnPOST">发送POST请求</button>
  </body>
  <script src="/js/jquery/jquery.min.js"></script>
  <script>
    $(function () {
      $("#btnPOST").on("click", function () {
        $.post(
          "http://www.liulongbin.top:3006/api/addbook",
          {
            bookname: "水浒传",
            author: "施耐庵",
            publisher: "天津图书出版社",
          },
          function (res) {
            console.log(res);
          }
        );
      });
    });
  </script>
复制代码

 

 

 

 

 

$.ajax( ) 函数语法

相比于$.get( ) 和$.post( ) 函数,jQuery 中提供的$.ajax( )函数,是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。

(1)$.ajax的语法格如下:

 

$.ajax({
  type:' ',//请求的方式,例如 GET或POST
  url:' ',//请求的 URL 地址
  data:' ',//这次请求要携带的数据
  success:function(res) { }//请求成功之后的回调函数  
})

(2)使用$.ajax()发起GET请求

使用$.ajax()发起GET请求时,只需要将type属性的值设置为'GET'即可:
复制代码
  <body>
    <button id="btnGET">发起GET请求</button>
  </body>
  <script src="/js/jquery/jquery.min.js"></script>
  <script>
    $(function () {
      $("#btnGET").on("click", function () {
        $.ajax({
          type: "GET",
          url: "http://www.liulongbin.top:3006/api/getbooks",
          // 如果不写参数就没必要写data  id
          data: {
            id: 1,
          },
          success: function (res) {
            console.log(res);
          },
        });
      });
    });
  </script>
复制代码

 

 

 

 

(3)使用$.ajax()发起POST请求 

使用$.ajax()发起GET请求时,只需要将type属性的值设置为'GET'即可:
复制代码
  <body>
    <button id="btnPOST">发起POST请求</button>
  </body>
  <script src="/js/jquery/jquery.min.js"></script>
  <script>
    $(function () {
      [
        $("#btnPOST").on("click", function () {
          $.ajax({
            type: "POST",
            url: "http://www.liulongbin.top:3006/api/addbook",
            data: {
              bookname: "史记",
              author: "司马迁",
              publisher: "上海图书出版社",
            },
            success: function (res) {
              console.log(res);
            },
          });
        }),
      ];
    });
  </script>
复制代码

 

 

posted @   罗砂  阅读(1523)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示