1、jsp页面(ajxscon.jsp)
前端展示部分:创建点击事件和显示表格
<div>
<table id="num">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
</table>
<button id="butt" name="butt" onclick="butt()" class="butt2"></button>
</div>
js部分:原生ajax(get请求)
<script>
function butt(){
var ajxs=new XMLHttpRequest(); //该对象用于在后台与服务器交换数据
ajxs.open("get","/Servlet1",true) //建立连接,true--->异步,/Servlet1----->Servlet路径
ajxs.send(); //发送,get不填内容
ajxs.onreadystatechange = () => { //回调函数
if (ajxs.readyState==4 && ajxs.status==200){ //ajxs、网络连接 状态码
let obj=ajxs.responseText;
console.log(obj)
let json=JSON.parse(obj); //转成json格式
var str="";
for (let i=0;i<json.length;i++){
str=str+ "<tr>" +
"<td>"+json[i].id+"</td>" +
"<td>"+json[i].name+"</td>" +
"</tr>"
}
document.getElementById("num").innerHTML=" " + //table标签--->innerHTML属性 添加内容
"<tr> " +
"<td>学号</td> " +
"<td>姓名</td> " +
"</tr>" +str;
}
}
}
</script>
2、Servlet页面(Servlet1)
模拟从数据库取出数据,创建对象并转json格式(需要创建对应实体类,本文是Student)
@WebServlet("/Servlet1")
public class Servlet1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
Student student=new Student();
student.setId(1);
student.setName("张三");
Student student1=new Student();
student1.setId(2);
student1.setName("李四");
List<Student> list=new ArrayList<>();
list.add(student);
list.add(student1);
Gson gson=new Gson();
String json=gson.toJson(list); //转json格式
PrintWriter os=resp.getWriter();
os.write(json);
os.flush();
os.close();
}
3、Gson的jar包及版本(pom.xml文件中添加)
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.9.1</version>
</dependency>
4、实验结果
点击前
点击后效果