利用jQuery来实现Ajax

get()

在jQuery中 $.get()函数的功能比较单一
它是专门用来发起get请求的 从而将服务器上的资源请求到客户端来使用
$.get()函数的语法如下
$.get( url , [data] ,{callback})
第一个参数url 是字符串类型 也是必须要有的 他代表 要请求的资源地址
第二个参数data 是要以对象方式 它代表请求资源期间需要携带的参数 如果没有 就全部返回
第三个参数 callback 是要以函数的方式 他代表请求成功时 的回调函数 它也是可以没有的
为了方便区分和理解 我们以图表的方式

不带参数时

我们设定一个按钮 点击就get我们选定的资源地址获取数据

 <button  id="btn1"> 不带参数-点击</button>

并且 这次我们不带data参数

   $('#btn1').on('click', function(){
         $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
           console.log(res);
         })
       });

带参数时

我们只要在之前的函数的基础上 加上第二个参数

 <button id = "btn2">带参数-点击</button>

然后绑定点击事件

 $('#btn2').on('click', function(){
     $.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
       console.log(res);
     })
   })

就会获得我们指定的id = 1的数据
我们可以简单理解为 第二个参数相当于一个精准判断的条件

post()

在jQuery中 $.post()函数的功能比较单一
它是专门用来发起post请求的 从而将服务器上的资源请求到客户端来使用
$.post()函数的语法如下
$.post( url , [data] ,{callback})
第一个参数url 是字符串类型 也是必须要有的 他代表 要提交的资源地址
第二个参数data 是要以对象方式 它代表请求资源期间需要提交的数据 他也是可以没有的
第三个参数 callback 是要以函数的方式 他代表数据提交成功时 的回调函数 它也是可以没有的
为了方便区分和理解 我们以图表的方式

案例如下

   <button>POST</button>
    <script>
      $(function () {
        $("button").on("click", function () {
          $.post(
            "http://www.liulongbin.top:3006/api/addbook",
            { bookname: "水浒传" },
            function (res) {
              console.log(res);
            }
          );
        });
      });
    </script>

ajax（）

我们之前上面两个方法过于单一
我们jQuery给我们提供了ajax方法
语法如下
$.ajax({
type:’ ’ 代表请求的方式 可以是GET和POST 注意是大写
url ： 代表请求的url地址
data：{} 代表要提交给服务器的数据
succes： {} 请求成功的回调函数
})

使用$.ajax()发起get请求

使用$.ajax()发起get请求， 只需要将type属性的值设置为‘GET’ 即可：

  <button> 点击 </button>
   <script>
     $(function () {
      $('button').on('click', function(){
        $.ajax({
          type: 'GET',
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          data:{ id : 1},
          success: function(res){
            console.log(res);
          }
        })
      })      
     })
   </script>

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

使用$.ajax()发起get请求， 只需要将type属性的值设置为‘POST’ 即可：

 <button> 点击 </button>
  <script>
    $(function(){
      $('button').on('click', function(){
       $.ajax({
         
        type: 'POST',
         url: 'http://www.liulongbin.top:3006/api/addbook',
         data:{ bookname:'水浒传',
                 author: '施耐庵',

        },
         success: function(res){
           console.log(res);
          }

       })
     })
    })
    </script>