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>