101 lines
5.1 KiB
Plaintext
101 lines
5.1 KiB
Plaintext
<%@ 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"><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;
|
||
}
|
||
}</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>
|
||
</div>
|
||
</body>
|
||
</html> |