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

本身异步刷新用处非常多,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:实现异步新增数据的更多相关文章

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

    1.使用load()方法异步请求数据   使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:   load(url,[data],[callba ...

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

    ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...

  3. SpringMVC+Jquery -页面异步载入数据

    背景: 做项目时涉及到页面.当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新.这都是几百年前使用的技术了.你用 ...

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

    Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...

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

    参考https://www.helloweba.com/view-blog-195.html html页面 <div class="weui-cells" id=" ...

  6. ajax是异步的,异步取数据,如何能保证数据是存在的。

    https://segmentfault.com/q/1010000002964172 ajax是异步的,所以aa()在执行的时候,return的那个result本身就是空的,在此后的某些秒以后,re ...

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

    效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...

  8. php+ajax+jquery 定时刷新页面数据

    testajax.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  9. 黑马学习AJAX jQuery发送异步请求 $.ajax() $.post() $.get()是在调用方法而不是定义方法

随机推荐

  1. Python-获取法定节假日

    获取公共节假日的接口,http://www.easybots.cn/holiday_api.net, 具体代码如下: # -*- coding:utf-8 -*- import json import ...

  2. Java 8 – 日期和时间实用技巧

    当你开始使用Java操作日期和时间的时候,会有一些棘手.你也许会通过System.currentTimeMillis() 来返回1970年1月1日到今天的毫秒数.或者使用Date类来操作日期:当遇到加 ...

  3. hdu1542 Atlantis (线段树+扫描线+离散化)

    Atlantis Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  4. 错误状态码URL重定向

    server { listen 80; server_name www.espressos.com; location / { root /data0/www/bbs; index index.htm ...

  5. 在sublime text3中安装git插件

    使用Package Control组件(推荐),打开install package控制台后,直接输入git就可以安装git插件. 这个时候Sublime Text只是安装了git插件,但还不能使用gi ...

  6. 【教程】鼠标右键新建添加RTF文档

    鼠标右键新建添加RTF文档 今天想将空间日志作个本地备份,但是苦于找不到适合的文本工具,因为一般的文本编辑工具都不支持贴图. 虽然word就可以满足我们的需求,但文件格式不用doc而是rtf    而 ...

  7. Android库分析工具(崩溃反编译)

    [时间:2016-07] [状态:Open] [关键词:android, 动态库,静态库, 编译,crash,addr2line] 本文主要整理Android编译系统中可用的库分析工作,可作为后续代码 ...

  8. adb install使用说明

    [时间:2016-08] [状态:Open] [关键词:android, apk,adb install] 将apk安装到模拟器或者手机上. Pushes an Android application ...

  9. FFmpeg Basics学习笔记(1)ffmpeg基础

    1 FFmpeg的由来 FFmpeg缩写中,FF指的是Fast Forward,mpeg是 Moving Pictures Experts Group的缩写.官网:ffmpeg.org 编译好的可执行 ...

  10. 【论文笔记】多任务学习(Multi-Task Learning)

    1. 前言 多任务学习(Multi-task learning)是和单任务学习(single-task learning)相对的一种机器学习方法.在机器学习领域,标准的算法理论是一次学习一个任务,也就 ...