简介
已经知道，JavaScript是一种浏览器脚本语言，Ajax是一种内嵌到浏览器中的一种技术
jQuery是一个以JavaScript为基础的plugin，即jQuery可以简化JavaScript开发；jQuery也可以简化Ajax的开发
Ajax的流程包括创建XmlHttpRequest对象，发送Ajax请求，处理服务器响应三个步骤；比较麻烦；jQuery也提供了对Ajax的支持；在jQuery中对Ajax进行了大幅度的简化和封装
jQuery对Ajax的支持
简单示例
为了使用jQuery需要先引入jQuery文件导入
NewListServlet类：稍微修改一下
(1)后台处理后的数据向前台传的时候，需要转成JSON字符串；这需要引入fastjson的jar包
(2)这个Servlet并没有主动重定向至news.html；而是在这儿默默的等待，等待news.html的Ajax的XmlHttpServlet主动去请求访问这个servlet
(3)这个Servlet通过，response.getWritwe().println(newsJsonStr);将JSON字符串回显到html中
(4)为了演示$.ajax()中的data传递参数，servlet中设置了if()else if()判断语句；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| import com.alibaba.fastjson.JSON;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet(name = "NewsListServlet", value = "/news_list")
public class NewsListServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String type = request.getParameter("t");
List<News> list = new ArrayList<News>();
if(type !=null && type.equals("tiobe")) {
list.add(new News("标题1", "2022-1-1", "TIOBE", "内容1"));
list.add(new News("标题2", "2022-1-2", "TIOBE", "内容2"));
list.add(new News("标题3", "2022-1-3", "TIOBE", "内容3"));
} else if (type == null || type.equals("pypl")) {
list.add(new News("标题1","2021-1-1","TIOBE","内容1"));
list.add(new News("标题2","2021-1-2","TIOBE","内容2"));
list.add(new News("标题3","2021-1-3","TIOBE","内容3"));
}
String newsjsonstr = JSON.toJSONString(list);
System.out.println(newsjsonstr);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(newsjsonstr);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
|
新增jquery_news.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inset title here</title>
<script type="text/javascript" src="JS/jquery-3.6.0.js"></script>
<script>
$(function (){
$.ajax({
"url":"/ajax/news_list",
"type":"get",
"data":"t=pypl",
"dataType":"json",
"success":function (json){
console.log(json);
for (var i=0;i<json.length;i++){
$("#container").append("<h1>"+json[i].title+"</h1>")
}
}
})
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
|
效果：在div中输出JSON对象调用的title属性，在控制台中输出接受服务器的数据也就是JSON对象
$.ajax({})中的JSON表达式添加error项
jquery_news.html文件中的$.ajax({})的JSON表达式添加error项。为了演示执行error内容的效果，，故意将JSON表达式中的type改成了post，而Servlet中是get方式，所以会报错，会执行error的部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inset title here</title>
<script type="text/javascript" src="JS/jquery-3.6.0.js"></script>
<script>
$(function (){
$.ajax({
"url":"/ajax/news_list",
"type":"post",
"data":"t=pypl",
"dataType":"json",
"success":function (json){
console.log(json);
for (var i=0;i<json.length;i++){
$("#container").append("<h1>"+json[i].title+"</h1>")
}
},
"error":function (xmlhttp,errorText){
console.log(xmlhttp);
console.log(errorText);
if (xmlhttp.status == "405"){
alert("无效的请求方式");
}else if (xmlhttp.status == "404"){
alert("未找到url资源");
}else if (xmlhttp.status == "500"){
alert("服务器内部错误");
}else {
alert("其他异常");
}
}
})
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
|
此时执行的效果：
执行error部分，因为是请求方式错误，故错误码为405，所以会执行error中的alert(“无效的请求方式”)；部分
在上面的示例中，针对不同的错误，只是打印了一些简单的信息，在实际中，会更加复杂，会根据实际业务不同，针对不同的错误情况做出不同的处理
data参数最好采用json的形式；这样更好看
1
2
3
4
| <script>
"data":{"t":"pypl","abc":"123"},
</script>
|
jQuery利用Ajax实现二级联动菜单
二级联动菜单的形式多种多样，在实际开发中十分常见
下面就是真实网站中的二级联动菜单
下面就使用Ajax来实现二级联动菜单的案例
自然使用jQuery脚本来提供Ajax的简化
实现二级联动菜单的主要内容：JavaBean，Servlet类，html
Channel类：JavaBean
利用java实现封装，写入无参与有参的构造方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| public class Channel {
private String code;
private String name;
public Channel(){}
public Channel(String code, String name) {
this.code = code;
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
|
ChannelServlet类：Servlet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| import com.alibaba.fastjson.JSON;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@WebServlet(name = "ChannelServlet", value = "/channel")
public class ChannelServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String level = request.getParameter("level");
String parent = request.getParameter("parent");
List chlist = new ArrayList<>();
if (level.equals("1")){
chlist.add(new Channel("ai","前沿/区块链/人工智能"));
chlist.add(new Channel("web","前端/小程序/JS"));
} else if (level.equals("2")) {
if (parent.equals("ai")){
chlist.add(new Channel("mirco","微服务"));
chlist.add(new Channel("blockchain","区块链"));
chlist.add(new Channel("other","……"));
}else if (parent.equals("web")){
chlist.add(new Channel("html","HTML"));
chlist.add(new Channel("css","CSS"));
chlist.add(new Channel("other","……"));
}
}
String json = JSON.toJSONString(chlist);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
}
|
channel.html：html
执行流程：
首先，第一个初始化函数会初始化第一级菜单；即data的参数是level=1，此时会执行servlet中的if(level.equals(“1”)){}；的部分；
即执行完第一个初始化函数后，会调用一次Servlet，最后的结果就是浏览器上的第一级菜单初始化了；此时，浏览器上的第一级菜单就会存下Servlet返回的结果，并在浏览器的页面上显示出来
其次，当第一级菜单发生change的时候(也就是选择第一级菜单的时候)，会调用第二个初始化函数；此时的data参数是{“level”:”2”,”parent”:parent};其中parent是第一级菜单的option的key值，这个值是从浏览器中获取到的，然后去调用Servlet增加到chlist中，然后添加到二级菜单中，仍然会从头到尾执行，自然Servlet中的chlist需要重新创建
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax实现二级菜单联动</title>
</head>
<script type="text/javascript" src="JS/jquery-3.6.0.js"></script>
<script>
$(function(){
$.ajax({
"url":"/ajax/channel",
"type":"get",
"data":{"level":"1"},
"dataType":"json",
"success":function (json){
console.log(json);
for (var i=0;i<json.length;i++){
var ch = json[i];
$("#lv1").append("<option value='"+ch.code+"'>"+ch.name+"</option>")
}
}
})
})
$(function () {
$("#lv1").on("change",function (){
var parent=$(this).val();
$.ajax({
"url":"/ajax/channel",
"type":"get",
"data":{"level":"2","parent":parent},
"dataType":"json",
"success":function (json) {
console.log(json);
$("#lv2>option").remove();
for (var i=0;i<json.length;i++){
var ch=json[i];
$("#lv2").append("<option value='"+ch.code+"'>"+ch.name+"</option>");
}
}
})
})
})
</script>
<body>
<select id="lv1" style="width: 200px;height: 30px">
<option selected="selected">请选择</option>
</select>
<select id="lv2" style="width: 200px;height: 30px">
</select>
</body>
</html>
|
效果：可以根据一级菜单的不同，实现不同内容的二级菜单
整体来看，Ajax的应用场景十分广泛，明白Ajax的作用，实际中很多业务场景适合使用Ajax
在实现某种业务问题时，具体的实现方式和实现策略，需要多看多写实际的例子
