这里是通过使用Ajax技术结合JSON和Struts2框架实现列表数据传递的攻略。以下是实现步骤:
首先,我们需要创建一个名为“ListAction”的Action类。该Action类将负责从数据库中获取列表数据并把它们封装为一个List对象,最后再将这个List对象转换为JSON格式返回给前端页面。
以下是一个简单示例:
public class ListAction extends ActionSupport {
private List<String> dataList; // 用于存储从数据库中获取的数据
public String execute() {
// 获取数据并存储到dataList中
dataList = new ArrayList<String>();
dataList.add("data1");
dataList.add("data2");
dataList.add("data3");
// 将dataList转换为JSON格式
Gson gson = new Gson();
String json = gson.toJson(dataList);
// 将JSON格式数据返回给前端页面
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
try {
PrintWriter out = response.getWriter();
out.print(json);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
return ERROR;
}
return null;
}
public List<String> getDataList() {
return dataList;
}
}
然后,我们需要在JSP页面中通过Ajax技术获取到后台返回的JSON格式数据,并将其转换为JS对象,最后利用JavaScript将数据呈现在页面上。
以下是一个简单示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>List Example</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 点击按钮触发Ajax请求
$("#btn").click(function () {
$.ajax({
url: '${pageContext.request.contextPath}/list.action', // 访问Action类的地址
type: 'GET',
dataType: 'json',
success: function (data) {
console.log(data);
// 将JSON格式转换为JS对象
var obj = JSON.parse(data);
// 循环取出数据并添加到页面ul中
var ul = document.getElementById("dataList");
for (var i = 0; i < obj.length; i++) {
var li = document.createElement("li");
li.innerHTML = obj[i];
ul.appendChild(li);
}
},
error: function () {
alert("Error!");
}
});
});
});
</script>
</head>
<body>
<h1>List Example</h1>
<button id="btn">Get List Data</button>
<ul id="dataList"></ul>
</body>
</html>
最后,我们需要在Struts2的配置文件struts.xml中配置Action类的映射关系。以下是一个简单示例:
<struts>
<package name="default" extends="struts-default">
<action name="list" class="com.example.ListAction">
<result name="success"></result>
</action>
</package>
</struts>
在这个示例中,我们创建了一个名为“default”的Package,并将ListAction映射到/action/list地址上。我们将通过jQuery库的Ajax功能来访问这个地址,并获取返回的JSON格式数据。
至此,我们通过使用Ajax技术结合JSON和Struts2框架实现了列表数据传递的工作。
以上是一个简单的示例,您可以根据具体需求进行更改和调整。
本文链接:http://task.lmcjl.com/news/8117.html