一、什么是Ajax
Ajax的全稱是Asynchronous JavaScript And XML（異步JavaScript和XML）
我們可以理解為：在網頁中利用XMLHttpRequest物件和服務器進行資料互動的方式就是Ajax，它可以幫助我們輕松實作網頁與服務器之間的資料互動，
二、什么是jQuery中的Ajax
瀏覽器中提供的XMLHttpRequest用法比較復雜，所以jQuery對XML進行了封裝，提供了一系列Ajax相關的函式，極大地降低了Ajax的使用難度
上面的相關知識我們簡要了解一下即可，接下來我們就切入正題，來講一講jQuery中發起Ajax請求最常用的三個方法，分別是$.get( ) 、$.post( ) 、$.ajax( )
三、$.get( )函式
功能單一、專門用來發起get請求，將服務器上的資源請求到客戶端來進行使用
1、$.get( )發起不帶引數的請求
直接提供請求的URL地址和請求成功之后的回呼函式即可
<button class="btnGet">get發起不帶引數的請求</button>
<script>
$(function(){
$(".btnGet").on("click",function(){
// 使用get發起不帶引數的請求
$.get('url地址',function(res){
// 列印回傳的資料
console.log(res);
})
})
})
</script>2、$.get( )發起帶引數的請求
<body>
<button id="btnGetInfo">發起帶引數的get請求</button>
<script>
$(function(){
$("#btnGetInfo").on("click",function(){
//將服務器上id為1的資料請求到客戶端
$.get('url地址',{id:1},function(res){
console.log(res);
})
})
})
</script>所以從上面我們可以看出，$.get( )函式在發起請求時要請求的資源地址是必須要指定的，請求期間要攜帶的引數和成功后的回呼函式不是必需的，
四、$.post( )函式
功能單一、專門用來發起post請求向服務器提交資料
<button id="btnPost">post向服務器提交資料</button>
<script>
$(function(){
$("#btnPost").on("click",function(){
$.post('url地址',{要傳給服務器的內容},function(res){
console.log(res);
})
})
})
</script>五、$.ajax( )函式
相比$.get( ) 和$.post( )函式，jQuery中提供的$.ajax( )函式是一個功能比較綜合的函式，允許我們對Ajax請求進行更詳細的配置
<body>
<button id="btnGet">使用ajax發起請求</button>
<script>
$(function(){
$("#btnGet").on("click",function(){
$.ajax({
//請求的方式：get/post
type:' ',
//請求的url地址
url:' ',
//這次請求要攜帶的資料（不需要引數可以省略）
data:{ },
//請求成功之后的回呼函式
success:function(res){ }
})
})
})
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291330.html
標籤：其他
下一篇：前端基礎五之jQuery基礎