Web 基础30 JQuery_AJAX入门及其案例
2018-04-12 本文已影响18人
小熊先生很不开心
jQuery的AJAX实现
其实坦白的说 就是我也比清除底层是什么样子的，但是就是$.ajax就是AJAX的封装，更简单是使用，这里我就直接讲解一下使用步骤哈哈哈。
先说一下语法
- $,jQuery
- ajax()
- 参数
- ajax()
{
type:设置请求的类型，常用的有GET和POST
url:设置请求的地址
data:设置POST方式提交的数据
success:请求响应完成后要执行的方法
}
-
JS中的{}对象
- {}代表一个对象
- 属性：
- {属性名称:属性值,属性名称2:属性值2}
- var stu = {name:"zhangsan",age:18}
- stu.name
- 方法:
- {方法名:function(){}}
- var stu = {sum:function(a,b){return a + b;}}
- stu.sum()
- 属性：
- {}代表一个对象
-
不管是原生的还是jQuery的AJAX,需要设置5个部分
- type:请求方式
- url:请求路径
- data:请求参数
- success:回调函数
- 对于post请求,设置一个Content-Type ---jQuery已经帮我们实现了
ajax的请求方式
- get请求
$.ajax({
type:"GET",
url:"/myJQueryAJAX/JQueryAJAXServlet?username=zhangsan",
success:function(msg) {
//alert(msg);
$("#div01").html(msg);
}
});
- post请求
$.ajax({
type:"POST",
url:"/myJQueryAJAX/JQueryAJAXServlet",
data:"username=zhangsan",
success:function(msg) {
$("#div01").html(msg + "post");
}
});
jQuery的其他AJAX方法
-
get
- 两个参数
- url:设置请求的地址
- fn:设置请求响应完成后要执行的方法
- 三个参数
- url:设置请求的地址
- data:设置向服务器提交的数据
- "username=zhangsan&password=123"
- {username:"zhangsan",password:"123"}
- fn:设置请求响应完成后要执行的方法
- 两个参数
-
post
- 三个参数
- url:设置请求的地址
- data:设置向服务器提交的数据
- "username=zhangsan&password=123"
- {username:"zhangsan",password:"123"}
- fn:设置请求响应完成后要执行的方法
- 三个参数
-
load
- 一个参数
- url
- 两个参数
- url
- data
- 一个参数
-
注意:
- load方法是由标签来调用,他可以直接把服务器传过来的数据塞到调用它的这个jQuery对象里面(标签)
- load方法会根据参数的不同,选择不同的提交方式,只有第二个参数是js对象,才会用post方法
- 实际开发中 get和post
- 如果你仅仅是想得到一些数据,用get就可以 某一页商品的信息 传一个页码
- 像表单登录,验证,重要程度比较高的,用post请求,相对的安全!
案例异步加载所有学生信息 我这里就提供jsp部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
//展示所有学生信息
function findAll() {
$.ajax({
type:"GET",
url:"/myJQueryAJAX/StudentServlet",
success:function(msg) {
//$("table").html($("table").html() + msg);
$("table").append(msg);
}
});
}
$(function() {
findAll();
});
</script>
</head>
<body>
<table border="1" width="500">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table>
</body>
</html>
