ajaxLearning

Ajax学习

  1. 之前了解过前后端分离,现在终于知道为什么Ajax那么重要了,因为它简直就是后端开发的福利,它没必要去管那些有的没的东西,尤其是前端的知识。
  2. 下面是基础Servlet和html编写的ajax小项目。
  3. 前期准备:json-20160810.jar ,因为需要JSON包,因为要下载好。

代码编写

  1. 实体类编写Note.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
26
27
28
29
package ajax;

import java.io.Serializable;

/**
* @author WANGYEKUN
* @version 1.0
* @date 2019/7/16 0016 21:59
*/
public class Note implements Serializable {
private String id;
private String name;

public String getId() {
return id;
}

public void setId(String id) {
this.id = id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}
}
  1. 前端页面ajax.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
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示笔记本</title>
</head>

<script type="text/javascript" src="js/jquery-3.2.1.js">
</script>
<script type="text/javascript">
$(function () {
$("#loadNoteBtn").click(function () {
$.ajax({
url: "/loadNoteServlet",
type: "POST",
dataType: "json",
success: function (result) {
// 清除列表原有列表
$("#note_list").empty();
for (var i = 0; i < result.length; i++) {
var id = result[i].id;
var name = result[i].name;
var s_li = "<li>" + name + "</li>";
var $li = $(s_li);
$li.data("noteId", id);
// 将id值藏入$li元素中
$("#note_list").append($li);
}
}
});
});
});

</script>
<body>
<input type="button" value="显示笔记本" id="loadNoteBtn">
<hr/>
<ul id="note_list">
</ul>
</body>
</html>
  1. LoadNoteServlet.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
package ajax;

import org.json.JSONArray;

import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

/**
* @author WANGYEKUN
* @version 1.0
* @date 2019/7/16 0016 21:57
*/
public class LoadNoteServlet extends HttpServlet {
@Override
public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
List<Note> notes = new ArrayList<>(16);
Note note = new Note();
note.setId("01");
note.setName("JAVA");
Note note1 = new Note();
note1.setId("01");
note1.setName("JAVA");
notes.add(note);
notes.add(note1);
JSONArray jsonArray = new JSONArray(notes);
String stringJson = jsonArray.toString();
// JSONObject obj = new JSONObject(note);
// String json = obj.toString();
// System.out.println("json = " + json);
res.setContentType("text/plain;charset=UTF-8");
PrintWriter out = res.getWriter();
out.println(stringJson);
out.flush();
out.close();

}
}
  1. 个人试手项目,如有错误,请联系。
------------------------------------本文结束感谢您的阅读--------------------------------
wangyekun wechat
扫一扫关注一波
坚持原创,您的支持将鼓励我继续创作!