【AJAX】第四部分 jQuery中使用AJAX
4. jQuery中使用AJAX
4.1 GET请求 、POST请求、通用请求
GET请求的语法：
$.get(url, [data], [callback(data)], [type])
POST请求的语法：
$.post(url, [data], [callback(data)], [type])
url：请求的路径
data：请求携带的参数
callback：成功的回调函数,其中参数表示响应体
type： 设置返回的类型，对返回值进行解析
通用的方法:
$.ajax({
url: 'url路径',
data: '',
type: '',
success:function(){},
error:function(){},
.
..
...
})
4.2 小案例
html代码
<h1>jQuery发送请求</h1>
<hr>
<button class="btn1">GET</button>
<button class="btn2">POST</button>
<button class="btn3">通用型方法</button>
<script>
//get请求
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:8000/jqget',{a:100,b:200},function(data){
console.log(data);
})
})
//post请求
$('button').eq(1).click(function(){
$.post('http://127.0.0.1:8000/jqpost',{a:100,b:200},function(data){
console.log(data);
})
})
// 通用的方法
$('button').eq(2).click(function(){
$.ajax({
// url
url:'http://127.0.0.1:8000/jqall',
//参数
data:{a:100,b:200},
//请求的类型
type:'GET',
//成功的回调
success:function(data){
//data表示为响应体
console.log(data);
},
//超时的时间
timeout:2000,
//失败的回调，不管是超时，网络异常都会执行此回调
error:function(){
console.log('失败啦！');
}
});
})
</script>
js代码
const express = require('express')
const app = express()
app.get('/jqget',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*')
response.send('我是GET请求！')
})
app.post('/jqpost',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*')
response.send('我是POST请求！')
})
app.all('/jqall',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*')
response.send('我是通用请求！')
})
app.listen('8000',()=>{
console.log("8000端口已启动！！！");
})
总结
以上就是今天要讲的内容，本文介绍了在jQuery中使用AJAX，希望对大家有所帮助！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/82944.html
