Ajax $.get、$.post、$.ajax三种不同的请求方式，jQuery中的Ajax解析

jQuey中的Ajax

jQuery对XMLHttpRequest进行了封装，提供一系列ajax相关的函数，极大降低了Ajax使用难度。

• jQuery中发起Ajax请求最常用的方法：
  1. $.get()：从服务器获取数据。
  2. $.post()：向服务器提交数据。
  3. $.ajax()：既能获取又能提交。

1 $.get()函数

• 功能：发起get请求，获取服务器上的资源到客户端。

• 语法：$.get(url,[data],[callback])

  参数名	参数类型	是否必选	说明
  url	string	是	要请求的资源地址
  data	object	否	请求资源时携带的参数
  callback	function	否	请求成功后的回调函数

  • $.get()发起不带参数的请求：直接提供url和callback即可。

    $.get("http://www.liulongbin.top:3006/api/getbooks",(res)=>{
        console.log(res);
    })
    

  • $.get()发起带参数的请求：带上url、参数、callback。

    $.get("http://www.liulongbin.top:3006/api/getbooks",{id:1},(res)=>{
        console.log(res);
    })
    

2 $.post()函数

• 功能：发起post请求，向服务器提交数据。

• 语法：$.post(url,[data],[callback])

  参数名	参数类型	是否必选	说明
  url	string	是	提交数据的地址
  data	object	否	要提交的数据
  callback	function	否	数据提交成功后的回调函数

  • $.post()发起请求，提交数据。

    $.post("http://www.liulongbin.top:3006/api/addbook",{bookname:"水浒传",author:"施耐庵",publisher:"天津图书出版社"},(res)=>{
        console.log(res);
    })
    

3 $.ajax()函数

• 功能：相比于$.get()和$.post()，$.ajax()允许对Ajax请求进行更性详细的配置。

• 语法：

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

  • 使用$.ajax()发起GET请求：将type属性的值设为’GET’即可（大小写均可）。

    $.ajax({
        type:'GET',
        url:'http://www.liulongbin.top:3006/api/getbooks',		
        data:{		
            id:1,
        },	
        success:function(res){
            console.log(res);
        }	
    })
    

  • 使用$.ajax()发起POST请求：将type属性的值设为’POST’即可（大小写均可）。

    $.ajax({
        type:'POST',
        url:'http://www.liulongbin.top:3006/api/addbook',		
        data: {
            bookname:"三体",
            author:"刘慈欣",
            publisher:"人民出版社",
        },	
        success:function(res){
            console.log(res);
        }	
    })