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  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
时间: 2025-01-22 03:28:56

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

Ajax.BeginForm的异步提交数据 简介

Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步的表单提交,这对于我们开发者来说是一个福音,我们不用再自己去用JQ代码了,直接用MVC自代的Ajax.BeginForm就可以很容易的完成一个异步的表单提交动作. Html.BeginForm的原型解释: 1 @using (Html.BeginForm()) {} //提交到当前页面 2 3 @u

jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数. 2.使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo.于是写下来,记录一下. ECharts ECharts是国人开发的一套前端的图表工具库,使用起来超方便,也很简单(当然了,前提是理解了其工作原理之

php+ajax+jquery分页并显示数据

参考https://www.helloweba.com/view-blog-195.html html页面 1 <div class="weui-cells" id="more"> 2 <!-- 把class="sin"的页面数据追加append到id="more"里面 --> 3 </div> 4 <div> 5 <button></button> 6

bootstrap jQuery Ztree异步载入数据,check选择&amp;amp;可加入、改动、删除节点

效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="../Scripts/zTree/js/jquery-1.4.4.min.js"></script> <script src

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo

jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)

一 简介和实现效果 这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了很多内容,然后继续输入一个"e"后,提示的范围明显就变小了. 注:在文末我会给出完整源代码的下载链接,以供大家参考 二 具体实现 1 在eclipse for java ee中创建一个Java Web工程,然后导入相应的jar包,特别说明的是:这里要导入一个额外的dwr.jar.也就是说,

Struts2+Jquery实现ajax并返回json类型数据

主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的数据,并转换为json类型模式数据 3.配置struts.xml文件 4.页面脚本接受并处理数据 网上看到很多关于Struts2+ajax+jquery+json的例子,但是很多都不完整,也看不明白,主要原因是返回jsno类型数据和原来的返回字符串类型数据不一样,并且网友们实现步骤没有说清楚,让初学的朋友捉摸不透到底该怎么做. 我做了个简单的demo,供网友们学习,最后我会附上链接,可以下载整个de

总结ASP.NET MVC视图页使用jQuery传递异步数据的几种方式

在ASP.NET MVC的视图页向控制器传递异步数据,可能是数组,JavaScript对象,json,表单数据,等等. 关于数据,JavaScript对象有时候和json长得一模一样,有么有? var person = {Name: 'darren', Age: 21};以上是一个JavaScript对象.不过也可以这样表示: var person = {"Name":"darren","Age":21};以上JavaScript对象的另外一种表