2020-11-02获取后台数据方式总结(AJax局部刷新)
程序员文章站
2022-06-17 15:00:10
...
一.用form表单<c:forEach/>获取后台数据
1.【index01.jsp页面】
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!--页面头部需要导c:forEach包-->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>c:forEach获取后台数据</title>
</head>
<body>
<form>
<table border="1" align="center">
<caption>c:forEach获取后台数据</caption>
<!--tr行--><!--th列：表头--><!--td列：内容-->
<tr>
<th>编号</th><th>姓名</th><th>年龄</th><th>密码</th>
</tr>
<!--页面头部需要导入c:forEach包-->
<c:forEach items="${userlist}" var="user">
<tr align="center">
<td>${user.uid}</td>
<td>${user.uname}</td>
<td>${user.uage}</td>
<td>${user.upwd}</td>
</tr>
</c:forEach>
</table>
</form>
</body>
</html>2.【Controller/Servlet控制类】
@WebServlet("/show01Servlet")
public class show01Servlet extends HttpServlet {
private UserService userservice = new UserService();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 统一编码格式
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
// 1.获取到来自数据库的全部数据
List<UserPojo> list = userservice.showService();
// 把获取到的数据存放到request对象中
req.setAttribute("userlist", list);
// 2.将获取到的数据显示到页面
req.getRequestDispatcher("index01.jsp").forward(req, resp);
}
}二.原生js读取json文件(获取后台数据传值)
1.【index02.jsp页面】
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>JS调用Ajax</title>
<script type="text/javascript" src="js/javaScript02.js"></script>
</head>
<body>
<form>
<table border="1" align="center">
<caption>JS调用Ajax</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>密码</th>
</tr>
<!-- 分组标签 -->
<tbody id="tbodyID"></tbody>
</table>
</form>
</body>
</html>2.【javaScript02.js】
//创建局部刷新的对象
var request = new XMLHttpRequest();
//开启服务——调用业务逻辑层Servlet
request.open("post", "show02JavaScript");
//不发送数据给控制层Servlet
request.send(null);
//加载回调函数
request.onload = function() {
var list = JSON.parse(request.responseText);
var result = "";
for ( var i = 0; i < list.length; i++) {
result += "<tr>";
result += "<td>" + list[i].uid + "</td>";
result += "<td>" + list[i].uname + "</td>";
result += "<td>" + list[i].uage + "</td>";
result += "<td>" + list[i].upwd + "</td>";
result += "</tr>";
}
document.getElementById("tbodyID").innerHTML = result;
};3.【Controller/Servlet控制类】
@WebServlet("/show02JavaScript")
public class show02JavaScript extends HttpServlet {
private UserService userservice = new UserService();
@Override
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 统一编码格式
request.setCharacterEncoding("utf-8");
// 因为返回的是json格式数据，所以需要将响应头信息设置为“application/json;charset=utf-8”
response.setContentType("application/json;charset=utf-8");
// 1.获取到来自数据库的全部数据
List<UserPojo> list = userservice.showService();
// 创建对象把Object转换成json数据类型
ObjectMapper om = new ObjectMapper();
// 将json格式的数据转换成字符串类型
String result = om.writeValueAsString(list);
PrintWriter writer = response.getWriter();
writer.print(result);
writer.flush();
writer.close();
}
}三.jQuery读取json文件(获取后台数据传值)
1.【index03.jsp页面】同“原生js读取json文件”
2.【javaScript03.js】
$(function() {
$.ajax({
url : "show03Jquery",
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success : function(list) {
//服务器传过来后的数据格式，为json格式
var result = "";
for ( var i = 0; i < list.length; i++) {
result += "<tr>";
result += "<td>" + list[i].uid + "</td>";
result += "<td>" + list[i].uname + "</td>";
result += "<td>" + list[i].uage + "</td>";
result += "<td>" + list[i].upwd + "</td>";
result += "</tr>";
}
//通过id选择器拿到tbody标签,html()就相当于JS中innerHTML
$("#tbodyID").html(result);
}
});
});
3.【Controller/Servlet控制类】同“原生js读取json文件”
附录：
【结果展示：】
上一篇： php目录操作实例代码_PHP教程