<!-- Struts2的xml文件配置 -->
<struts> <package name="default" namespace="/" extends="json-default" > <!-- 这里必须要继承json-default类 --> <action name="JsonAction" class="com.simpleton.demo.action.JsonAction" method="executeAjax"> <result type="json"> <param name="root">result</param> </result> <!-- 因为这里不是用result返回具体的视图,而是要返回json数据,所以这里的type是json --> </action> </package> </struts>
action类:
package com.simpleton.demo.action; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import net.sf.json.JSONObject; import com.opensymphony.xwork2.ActionSupport; public class JsonAction extends ActionSupport{ private static final long serialVersionUID = 1L; private String result; private String name; private String age; private String position; /** * 处理Ajax请求 * */ public String executeAjax(){ System.out.println(name); Map<String,Object> map = new HashMap<String, Object>(); map.put("name", name); map.put("age", age); map.put("position", position); JSONObject json = JSONObject.fromObject(map); result = json.toString(); System.out.println(result); return SUCCESS; } public String getResult() { return result; } public void setResult(String result) { this.result = result; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAge() { return age; } public void setAge(String age) { this.age = age; } public String getPosition() { return position; } public void setPosition(String position) { this.position = position; } }
html页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>n.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> <script type="text/javascript"> function btn(){ var $btn = $("#btn"); $btn.bind("click",function(){ $.ajax({ type:"post", url:"JsonAction", data:{ name:$("input[name='name']").val(), age:$("input[name='age']").val(), position:$("input[name='position']").val() }, dataType:"json", success:function(data){ var d = eval("("+data+")"); $("#s_name").text(""+d.name+""); $("#s_age").text(""+d.age+""); $("#s_position").text(""+d.position+""); }, error:function(){ alert("错误"); } }); }); } $(document).ready(function(){ btn(); }); </script> </head> <body> <div id="div_json"> <h5>录入数据</h5> <br> <form action="JsonAction" method="post"> <label for="name">姓名</label><input type="text" name="name" /> <label for="age">年龄</label><input type="text" name="age" /> <label for="position">职务</label><input type="text" name="position" /> <input type="button" id="btn" class="btn" value="提交结果"> </form> <br> <ul> <li>姓名<span id="s_name">暂无数据</span></li> <li class="li_layout">年龄<span id="s_age">暂无数据</span></li> <li class="li_layout">职务<span id="s_position">暂无数据</span></li> </ul> </div> </body> </html>
这个案例简单了实现了利用jQuery以及ajax进行html页面与struts之间的数据交互,摆脱了以前一直应用的jsp页面。