毕业设计---json,Struts,ajax以及JQuery简单案例

<!-- 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页面。