ajax简述

132 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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>