feat: expand struts demo lab
This commit is contained in:
Codex
@@ -1,101 +1,51 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AJAX + JSON - Struts2 学习</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AJAX and JSON Guide</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; }
|
||||
body { margin: 0; padding: 24px; font-family: "Aptos", "Segoe UI", sans-serif; background: linear-gradient(135deg, #122c63, #1464c7); }
|
||||
.shell { max-width: 980px; margin: 0 auto; background: rgba(255,255,255,0.96); border-radius: 28px; padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,0.18); }
|
||||
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: #1464c7; font-weight: 800; }
|
||||
h1, h2 { margin: 10px 0 12px; }
|
||||
p, li { color: #53667d; line-height: 1.9; }
|
||||
pre { background: #101827; color: #d9e7ff; padding: 18px; border-radius: 18px; overflow-x: auto; }
|
||||
.links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
|
||||
.btn { display: inline-flex; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; background: #e8f2ff; color: #1464c7; }
|
||||
</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"><action</span> name=<span class="string">"getUser"</span> class=<span class="string">"com.demo.UserAction"</span><span class="keyword">></span>
|
||||
<span class="keyword"><result</span> type=<span class="string">"json"</span><span class="keyword">></span>
|
||||
<span class="comment"><!-- 可选: 只包含指定属性 --></span>
|
||||
<span class="keyword"><param</span> name=<span class="string">"includeProperties"</span><span class="keyword">></span>user\..*,success<span class="keyword"></param></span>
|
||||
<span class="keyword"></result></span>
|
||||
<span class="keyword"></action></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;
|
||||
<div class="shell">
|
||||
<div class="eyebrow">Guide</div>
|
||||
<h1>Returning JSON from Struts2 actions</h1>
|
||||
<p>The demo now includes both an action-level JSON response and a REST-style JSON route. That makes it easier to compare MVC pages with lightweight API payloads.</p>
|
||||
|
||||
<h2>What the action returns</h2>
|
||||
<ul>
|
||||
<li>A <code>success</code> flag.</li>
|
||||
<li>A short message describing the payload.</li>
|
||||
<li>Sample user records that can be consumed by AJAX.</li>
|
||||
</ul>
|
||||
|
||||
<pre>public class AjaxAction extends ActionSupport {
|
||||
private boolean success;
|
||||
private String message;
|
||||
private List<User> users;
|
||||
|
||||
public String execute() {
|
||||
success = true;
|
||||
message = "Mock AJAX response";
|
||||
return SUCCESS;
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<h2>3. 前端 AJAX 调用</h2>
|
||||
<div class="section">
|
||||
<pre><span class="comment">// 原生 fetch</span>
|
||||
fetch(<span class="string">'/getUser'</span>)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
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"><input</span> type=<span class="string">"text"</span> id=<span class="string">"keyword"</span> onkeyup=<span class="string">"search(this.value)"</span>/>
|
||||
<span class="keyword"><div</span> id=<span class="string">"results"</span><span class="keyword">></div></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">'<div>'</span> + item.name + <span class="string">'</div>'</span>);
|
||||
});
|
||||
});
|
||||
}</pre>
|
||||
</div>
|
||||
|
||||
<a href="/demo/interceptor" class="btn">下一节：拦截器 →</a>
|
||||
<div class="links">
|
||||
<a class="btn" href="../../ajax">Open action JSON</a>
|
||||
<a class="btn" href="../../api/users">Open REST JSON</a>
|
||||
<a class="btn" href="../../index.jsp">Back to portal</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user