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

struts+ajax+jquery：实现异步新增数据的更多相关文章

jQuery基础（Ajax，load()，getJSON()，getScript()，post()，ajax()，同步/异步请求数据）
1.使用load()方法异步请求数据使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callba ...
ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化
ECharts 下载js代码工作原理浅析在项目中引入ECharts 后台处理数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理前端全部代码演示结果总结最近要 ...
SpringMVC+Jquery -页面异步载入数据
背景: 做项目时涉及到页面.当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新.这都是几百年前使用的技术了.你用 ...
Ajax.BeginForm的异步提交数据简介
Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...
php+ajax+jquery分页并显示数据
参考https://www.helloweba.com/view-blog-195.html html页面 <div class="weui-cells" id=" ...
ajax是异步的,异步取数据，如何能保证数据是存在的。
https://segmentfault.com/q/1010000002964172 ajax是异步的,所以aa()在执行的时候,return的那个result本身就是空的,在此后的某些秒以后,re ...
bootstrap jQuery Ztree异步载入数据，check选择&可加入、改动、删除节点
效果图: 一.下载zTree插件地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...
php+ajax+jquery 定时刷新页面数据
testajax.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
黑马学习AJAX jQuery发送异步请求 $.ajax() $.post() $.get()是在调用方法而不是定义方法

随机推荐

Enum，Int，String的互相转换枚举转换
Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...
lua -- io.pathinfo
io.pathinfo 拆分一个路径字符串,返回组成路径的各个部分. 格式: parts = io.pathinfo(路径) 使用示例: local pathinfo = io.pathinfo(&q ...
mysql备份的三种方式详解
一.备份的目的做灾难恢复:对损坏的数据进行恢复和还原需求改变:因需求改变而需要把数据还原到改变以前测试:测试新功能是否可用二.备份需要考虑的问题可以容忍丢失多长时间的数据:恢复数据要在多长时间内 ...
（原创）如何使用boost.asio写一个简单的通信程序（二）
先说下上一篇文章中提到的保持io_service::run不退出的简单办法.因为只要异步事件队列中有事件,io_service::run就会一直阻塞不退出,所以只要保证异步事件队列中一直有事件就行了, ...
python（51）：Python vars() 函数
Python vars() 函数 Python 内置函数描述 vars() 函数返回对象object的属性和属性值的字典对象. 语法 vars() 函数语法: vars([object]) 参数 ...
canvas的图片绘制案例
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
js 实现数组元素交换位置
/** * 数组元素交换位置 * @param {array} arr 数组 * @param {number} index1 添加项目的位置 * @param {number} index2 删除项 ...
Oracle生成流水号函数
一.参考 1:日期范围上 smalldatetime的有效时间范围1900/1/1~2079/6/6 datetime的有效时间范围1753/1/1~9999/12/31 2:精准度上 smallda ...
KVM虚拟机的xml配置文件
在RHEL6中,用于从磁盘启动的XML文件这里以dcs01.xml为例: <domain type='kvm'><name>dcs01</name><uui ...
[转]自定义注释@interface的用法
一.什么是注释说起注释,得先提一提什么是元数据(metadata).所谓元数据就是数据的数据.也就是说,元数据是描述数据的.就象数据表中的字段一样,每个字段描述了这个字段下的数据的含义.而J ...

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

struts+ajax+jquery：实现异步新增数据的更多相关文章

随机推荐

热门专题