get请求.png
post请求.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src = "../lib/jquery-1.12.4.min.js"> </script>
<script>
//get
//函数
$(function(){
//绑定点击按钮
$('#btnGET').on('click', function(){
//$.get():请求的地址，这个请求的地址就是后端控制器的响应的地址。
//function(res): 这个回调函数是接受服务器端传过来的数据！！ [只能一个回调函数]
//这里回调函数带来的信息有3个图书信息
$.get('http://www.liulongbin.top:3306/api/getbooks', function(res){
console.log(res);
})
})
})
//get带函数
$(function(){
//绑定按钮
$('#btnGET2').on('click', function(){
//{id:1} : 发出请求信息，请求返回id为1的图书信息
//这里回调函数的信息返回只有1个图书信息
$.get('http://www.liulongbin.top:3306/api/getbooks', {id :1}, function(res){
console.log(res);
})
})
})
//post不带参数
$(function(){
$('#btnPost').on('click', function(){
$.post('http://www.liulongbin.top:3306/api/addbook',{bookname:'疯狂Java', author:'香蕉哥',
publisher:'高能出版社'}, function(res){
console.log(res);
})
})
})
//post带参数
$(function(){
$('#btnPost2').on('click', function(){
$.post('http://www.liulongbin.top:3306/api/addbook', function(res){
console.log(res);
})
})
})
</script>
</head>
<body>
<button id = "btnGET">Get请求不带参数传过去！！！</button>
<br/>
<button id = "btnGET2">Get请求带参数传过去！！</button>
<br/>
<button id = "btnPost">Post请求带参数！！</button>
<br/>
<button id = "btnPost2">Post请求不带参数</button>
<br/>
</body>
</html>
