持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情
ajax能让我们实现服务器和网页之间的数据交互
ajax一些应用场景里,用户名检测,注册用户时,通过ajax形式,动态检测用户名是否被占用 输入关键字时,可通过ajax形式,动态加载搜索提示列表
数据分页显示,根据页码动态刷新表格的数据
了解JQuery中的ajax
jQuery对XMLHttpRequest进行了封装,提供一系列ajax函数,减低使用ajax使用难度
jQuery里发送ajax常用三种方法
$get() $post() $ajax()
$.get()函数用法
$.get(url,[data],[callback])
callback是请求成功时的回调函数,data请求资源间要携带的参数
$.get()发起不带参数的请求
直接提供请求的URL地址和请求成功的回调函数就可
$.get(URL,function(res){
console.log(res) // 这里的res就是指服务器返回的数据
})
当使用jQuery中的jax中,肯定首先要引用jquery.js的文件
简单的例子
<button id = "get">GET</button>
<script>
$(function(){
$("get").on("click",function(){
$.get(URL,function(res){
console.log(res)
})
})
})
</script>
$.get()发起带参数的请求
$.get(URL,{id:5},function(res){
console.log(res) // 这里的res就是指服务器返回的数据
})
需要传什么参数就以对象形式传出
$.post()函数语法
$.post(url,[data],[callback])
功能单一,向服务器提交数据
### $.post()向服务器提交数据
当我们想要增加一个用户信息时
<button id = "post">POST</button>
<script>
$(function(){
$("#post").on("click",function(){
$.post(URL,{name:"gooodenough",age:"19"},function(res){
console.log(res)
})
})
})
</script>
$.ajax()函数语法
相比于前两种函数,jQuery提供的该函数功能较为综合,允许我们对ajax请求进行更详细的配置
$.ajax({
type:"", // 例如get或者post的请求方式
url:"", // url地址
data:{}, // 请求要携带的数据
success:function(res){} // 成功后的回调函数
})
用该函数的简单例子
<button id = "get">GET</button>
<script>
$(function(){
$("#get").on("click",function(){
$.ajax(URL,{id:1},
success:function(res){
console.log(res)
})
})
})
</script>