一、什么是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>
|