struts+ajax+jquery：实现异步新增数据

很久未有更新，最近因为团队其它事耽误没有继续学习，但心中十分忐忑不安，抽空把自己薄弱的点拿来再巩固一下！

本身异步刷新用处非常多，SSH框架对我来讲，已无难度，但结合ajax处理一些增删查改分页等，就觉得无奈，还是把基础抓起来先

先看一下本次功能的效果图：

1、用到的jar包

下载地址：http://pan.baidu.com/s/1hspDeoW

2、index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		//提交结果，执行ajax
		function btn(){
			var $btn = $("input.btn");//获取按扭元素
			
			//给按扭绑定点击事件
			$btn.bind("click",function(){
				$.ajax({
					type:"post",
					url:"jsonAction.action",//需要用来处理ajax请求的action,excuteAjax为处理的方法名,JsonAction为action名
					data:{
						name:$("input[name=name]").val(),
						age:$("input[name=age]").val(),
						position:$("input[name=position]").val()//这里不用加“,”不然会报错
					},
					dataType:"Json",//设置返回的数据类型
					success:function(data){
						alert(data);
						var d = eval("("+data+")");//将数据转换成json类型，可以把data用alert()输出来看看是什么样的结构,得到的是一个形如｛"key":"value","key1":"value1"｝的数据类型，然后取舍出来
						//来一条增加一条tr 3列td
						var tr_begin = "<tr>";
						var tr_end = "</tr>";
						var td_c1="<td>"+d.name+"</td>";
						var td_c2="<td>"+d.age+"</td>";
						var td_c3="<td>"+d.position+"</td>";
						var text = tr_begin+td_c1+td_c2+td_c3+tr_end;
						$("#view").append(text);
					},
					error:function(){
						alert("系统异常，请稍后再试！");
					}//这里不用加","
				});
			
			});
		}
		
		//页面加载完成，触发绑定事件
		$(document).ready(function(){
			btn();//点击提交，执行ajax
		});
	
	</script>
  </head>
  
  <body>
    

	<div id="div_json">
		<h5>录入数据</h5>
		<br/>
		<form action="#" 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" class="btn" value="提交结果" />
		</form>
		<br/>
		<h5>显示结果</h5>
		<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> -->
		
		<table id="view">
			<tr>
				<td>姓名</td>
				<td>年纪</td>
				<td>职务</td>
			</tr>
		</table>
	</div>
	
	<div id="authorgraph"><img alt="" src=""></div>
  </body>
</html>

　　

3、后端action

package action;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import net.sf.json.JSONObject;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.json.JSONUtil;

import sun.org.mozilla.javascript.internal.json.JsonParser;

import com.opensymphony.xwork2.ActionSupport;

public class JsonAction extends ActionSupport implements ServletRequestAware{
	private static final long serialVersionUID = 1L;
	
	private HttpServletRequest request;
	private String result;
	
	public String getResult() {
		return result;
	}
	public void setResult(String result) {
		this.result = result;
	}
	@Override
	public void setServletRequest(HttpServletRequest arg0) {
		this.request = arg0;
		
	}
	
	/**
	 * 处理ajax请求
	 */
	public String executeAjax(){
		try {
			//获取数据
			String name = request.getParameter("name");
			int age = Integer.parseInt(request.getParameter("age"));
			String position = request.getParameter("position");
			
			System.out.println("name=="+name+"age=="+age+"position=="+position);
			//将数据存储在map里，再转换成json类型数据，也可以自己手动构造json类型数据
			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);//将map对象转换成json类型数据
			result = json.toString();//给result赋值，传递给页面
			System.out.println("result==="+result);
		} catch (Exception e) {
			e.printStackTrace();
		}return SUCCESS;
	}
	
}

　　4、struts.xml配置

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>

	<constant name="struts.i18n.encoding" value="UTF-8"></constant>
	
	<package name="simpleton" extends="struts-default,json-default">
		<action name="jsonAction" method="executeAjax" class="action.JsonAction">
			<!-- 返回json类型数据 -->
			<result type="json">
				<param name="root">result</param><!-- result是action中设置的变量名，也是页面需要返回的数据，该变量必须有setter和getter方法 -->
				
			</result>
		</action>
	
	</package>
</struts>

　　

总结：过程中我遇到jar包缺少的问题，关于lang包的版本问题，我放了2个，没有冲突，满足了要求。

java.lang.NoClassDefFoundError: org/apache/commons/lang3/StringUtils

 

posted @ 2017-07-12 12:40  sincoolvip  阅读(196)  评论(0)  编辑  收藏  举报