JQuery&AJAX
JQuery支持AJAX，使得其对AJAX的操作简化了很多，纵观漫长的前端历史长河，JQuery可能已经落伍，但是新的前端框架包括Vue，Angular,React都是在此的基础上产生的，因此学习JQuery&AJAX很有必要，对于平时自己测试接口也是很有必要的。
关键字简介
$.ajax()提交AJAX请求$.get()使用get方式提交ajax$.post使用post方式提交ajaxload最简单的调用ajax的方式serialize()格式化form下的输入数据
1. 完整的 $.ajax 参数 比较复杂，这里采用了常见的调用方式。
$
.ajax({
url
: page
,
data
:{"name":value
},
success
: function(result
){
$("#checkResult").html(result
);
}
});
$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面第二个参数 data:{name:value} 表示提交的参数第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数
示例代码：
<script src
="http://how2j.cn/study/jquery.min.js"></script
>
<div id
="checkResult"></div
>
输入账号
:<input id
="name" type
="text">
<script
>
$(function(){
$("#name").keyup(function(){
var page
= "/study/checkName.jsp";
var value
= $(this).val();
$
.ajax({
url
: page
,
data
:{"name":value
},
success
: function(result
){
$("#checkResult").html(result
);
}
});
});
});
</script
>
2.使用get方式提交ajax
$
.get(
page
,
{"name":value
},
function(result
){
$("#checkResult").html(result
);
}
);
$.get 使用3个参数
第一个参数: page 访问的页面第二个参数: {name:value} 提交的数据第三个参数: function(){} 响应函数只有第一个参数是必须的，其他参数都是可选
示例代码
<script src
="http://how2j.cn/study/jquery.min.js"></script
>
<div id
="checkResult"></div
>
输入账号
:<input id
="name" type
="text">
<script
>
$(function(){
$("#name").keyup(function(){
var page
= "/study/checkName.jsp";
var value
= $(this).val();
$
.get(
page
,
{"name":value
},
function(result
){
$("#checkResult").html(result
);
}
);
});
});
</script
>
3.使用post方式提交ajax
$.post 是 $.ajax的简化版，专门用于发送POST请求
$
.post(
page
,
{"name":value
},
function(result
){
$("#checkResult").html(result
);
}
);
$.post 使用3个参数:
第一个参数: page 访问的页面第二个参数: {name:value} 提交的数据第三个参数: function(){} 响应函数只有第一个参数是必须的，其他参数都是可选
实例代码
<script src
="http://how2j.cn/study/jquery.min.js"></script
>
<div id
="checkResult"></div
>
输入账号
:<input id
="name" type
="text">
<script
>
$(function(){
$("#name").keyup(function(){
var page
= "/study/checkName.jsp";
var value
= $(this).val();
$
.post(
page
,
{"name":value
},
function(result
){
$("#checkResult").html(result
);
}
);
});
});
</script
>
4.最简单的调用ajax的方式
load比起
.
g
e
t
,
.get,
.get,.post 就更简单了
$("#id").load(page,[data]);id: 用于显示AJAX服务端文本的元素Idpage: 服务端页面data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表
<script src
="http://how2j.cn/study/jquery.min.js"></script
>
<div id
="checkResult"></div
>
输入账号
:<input id
="name" type
="text">
<script
>
$(function(){
$("#name").keyup(function(){
var value
= $(this).val();
var page
= "/study/checkName.jsp?name="+value
;
$("#checkResult").load(page
);
});
});
</script
>
5.格式化form下的输入数据js
<script src
="http://how2j.cn/study/jquery.min.js"></script
>
<div id
="checkResult"></div
>
<div id
="data"></div
>
<a href
="http://how2j.cn/study/checkName.jsp">http
://how2j
.cn
/study
/checkName
.jsp
</a
>
<form id
="form">
输入账号
:<input id
="name" type
="text" name
="name"> <br
>
输入年龄
:<input id
="age" type
="text" name
="age"> <br
>
输入手机号码
:<input id
="mobile" type
="text" name
="mobile"> <br
>
</form
>
<script
>
$(function(){
$("input").keyup(function(){
var data
= $("#form").serialize();
var url
= "http://how2j.cn/study/checkName.jsp";
var link
= url
+"?"+ data
;
$("a").html(link
);
$("a").attr("href",link
);
});
});
</script
>
前文用到的checkName.jsp
<%@ page
import="java.util.List" %>
<%@ page
import="java.util.ArrayList" %>
<%@ page contentType
="text/html;charset=UTF-8" language
="java"
pageEncoding
="UTF-8" %>
<html
>
<head
>
<meta charset
="UTF-8">
<title
>Title
</title
>
</head
>
<body
>
<%
List
<String
> names
= new ArrayList<>();
names
.add("abc");
names
.add("ccc");
String name
= request
.getParameter("name");
if (names
.contains(name
)) {
%>
<font color
="red">can't use
</font
>
<%
} else {
%>
<font color
="green">can use
</font
>
<%
}
%>
</body
>
</html
>
http://how2j.cn/k/jquery/jquery-ajax/474.html#nowhere
