AJAX是一种用于在后台与服务器进行异步通信的技术,使得网页在不重新加载整个页面的情况下可以与服务器交换数据并更新部分内容。AJAX 使得网页更加动态和响应迅速。
1. 给予jQuery实现
AJAX使用的是 jQuery 语法。jQuery 是一个流行的 JavaScript 库,它简化了 HTML 文档遍历和操作、事件处理以及 AJAX 请求。
<script type="text/javascript">
<!-- 内容 -->
</script>
2. $(function(){})
$(function (){
bindBtn1Event();
})
$(function(){})
是 jQuery 的一种简写,用于在文档加载完成后执行代码。它的作用相当于 $(document).ready(function() {})
,即当 HTML 文档完全加载和解析完毕后,执行里面的函数。这通常用于初始化代码,比如绑定事件处理程序。
3.绑定事件
function bindBtn1Event() {
//寻找ID为btn1的元素,并为其绑定了一个点击事件
$("#btn1").click(function () {
//发送ajax请求
$.ajax({//提交地址
url: '/task/ajax/',
//提交方式
type: 'post',
//提交数据
data: {n1: 123,},
//提交数据格式
dataType: "JSON",
//对响应res的反馈
success: function (res) {
console.log(res)
}
})
})
}
3.1 $('#btn1').click(function(){*****})
3.2 ajax请求
- url: 提交地址
- type: 提交方式
- data: 提交数据
提交数据用字典类型,可以手写,也可以用id锁定
//方式一
data:{ m:200, n:100 },
//方式二
data:{
name: $("#txtUser").val(),
age: $("#txtAge").val()
},
//方式三
data: $('#form3').serialize(),
- dataType: 数据类型
-
success
:这是一个回调函数,在请求成功时执行。 -
function (res)
:回调函数接受一个参数res
,代表服务器返回的响应对象。