admin/struts2-demo
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: web.xml and generated files

Browse Source
This commit is contained in:
likingcode
2026-03-18 15:18:30 +08:00
parent fb9d2d1206
commit 1f60832445
20 changed files with 2071 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
web/demo/ajax/index.jsp Normal file
View File

@@ -0,0 +1,101 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>AJAX + JSON - Struts2 学习</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; margin: 0; padding: 20px; }
.container { max-width: 1200px; margin: 0 auto; }
.breadcrumb { background: white; padding: 15px 25px; border-radius: 10px; margin-bottom: 20px; }
.content { background: white; border-radius: 20px; padding: 40px; }
h1 { color: #667eea; border-bottom: 3px solid #667eea; padding-bottom: 15px; }
h2 { color: #764ba2; margin-top: 30px; }
.section { margin: 25px 0; padding: 20px; background: #f8f9fa; border-radius: 10px; }
pre { background: #1e1e1e; color: #d4d4d4; padding: 20px; border-radius: 10px; overflow-x: auto; }
.keyword { color: #569cd6; }
.string { color: #ce9178; }
.comment { color: #6a9955; }
.btn { display: inline-block; padding: 12px 30px; background: #667eea; color: white; text-decoration: none; border-radius: 25px; }
</style>
</head>
<body>
<div class="container">
<div class="breadcrumb">
<a href="/">🏠 首页</a> / AJAX + JSON
</div>
<div class="content">
<h1>⚡ AJAX + JSON</h1>
<h2>1. JSON 结果类型</h2>
<div class="section">
<p>使用 struts2-json-plugin 实现 AJAX 返回 JSON</p>
<pre><span class="comment">// struts.xml 配置</span>
<span class="keyword">&lt;action</span> name=<span class="string">"getUser"</span> class=<span class="string">"com.demo.UserAction"</span><span class="keyword">&gt;</span>
<span class="keyword">&lt;result</span> type=<span class="string">"json"</span><span class="keyword">&gt;</span>
<span class="comment">&lt;!-- 可选: 只包含指定属性 --&gt;</span>
<span class="keyword">&lt;param</span> name=<span class="string">"includeProperties"</span><span class="keyword">&gt;</span>user\..*,success<span class="keyword">&lt;/param&gt;</span>
<span class="keyword">&lt;/result&gt;</span>
<span class="keyword">&lt;/action&gt;</span></pre>
</div>
<h2>2. Action 示例</h2>
<div class="section">
<pre><span class="keyword">public class</span> UserAction <span class="keyword">extends</span> ActionSupport {
<span class="keyword">private</span> User user;
<span class="keyword">private</span> boolean success;
<span class="keyword">private</span> String message;
<span class="comment">// getter 是必须的，JSON 插件只序列化有 getter 的属性</span>
<span class="keyword">public</span> User getUser() { <span class="keyword">return</span> user; }
<span class="keyword">public</span> boolean isSuccess() { <span class="keyword">return</span> success; }
<span class="keyword">public</span> String getMessage() { <span class="keyword">return</span> message; }
<span class="keyword">public</span> String getData() {
user = <span class="keyword">new</span> User(<span class="string">"张三"</span>, <span class="string">"zhangsan@email.com"</span>);
success = <span class="keyword">true</span>;
message = <span class="string">"获取成功"</span>;
<span class="keyword">return</span> SUCCESS;
}
}</pre>
</div>
<h2>3. 前端 AJAX 调用</h2>
<div class="section">
<pre><span class="comment">// 原生 fetch</span>
fetch(<span class="string">'/getUser'</span>)
.then(r =&gt; r.json())
.then(data =&gt; {
console.log(data.user);
console.log(data.success);
});
<span class="comment">// jQuery</span>
$.getJSON(<span class="string">'/getUser'</span>, <span class="keyword">function</span>(data) {
$(<span class="string">'#username'</span>).text(data.user.username);
});</pre>
</div>
<h2>4. 完整示例：实时搜索</h2>
<div class="section">
<pre><span class="comment">// HTML</span>
<span class="keyword">&lt;input</span> type=<span class="string">"text"</span> id=<span class="string">"keyword"</span> onkeyup=<span class="string">"search(this.value)"</span>/&gt;
<span class="keyword">&lt;div</span> id=<span class="string">"results"</span><span class="keyword">&gt;&lt;/div&gt;</span>
<span class="comment">// JS</span>
<span class="keyword">function</span> search(keyword) {
$.getJSON(<span class="string">'/search'</span>, {keyword: keyword}, <span class="keyword">function</span>(data) {
$(<span class="string">'#results'</span>).empty();
data.results.forEach(<span class="keyword">function</span>(item) {
$(<span class="string">'#results'</span>).append(<span class="string">'&lt;div&gt;'</span> + item.name + <span class="string">'&lt;/div&gt;'</span>);
});
});
}</pre>
</div>
<a href="/demo/interceptor" class="btn">下一节：拦截器 →</a>
</div>
</div>
</body>
</html>