文档章节

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

十月阳光
 十月阳光
发布于 2013/06/21 15:26
字数 1049
阅读 12955
收藏 12
点赞 1
评论 9

网上看到很多关于Struts2+ajax+jquery+json的例子,但是很多都不完整,也看不明白,主要原因是返回jsno类型数据和原来的返回字符串类型数据不一样,并且网友们实现步骤没有说清楚,让初学的朋友捉摸不透到底该怎么做。

我做了个简单的demo,供网友们学习,最后我会附上链接,可以下载整个demo.

首先需要的包(struts核心包和json需要的包):

struts核心包:

json需要的包:

commons-logging-*.jar在导入struts核心包的时候就导入了,所以导入json包的时候可以去掉这个包

页面效果:


json_demo.jsp页面(该页面引用了jquery文件,我用的版本是jquery-1.8.2.js,如果使用版本不同,请自行修改):

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simpleton Demo | struts+ajax返回json类型数据</title>

<link rel="shortcut icon" type="image/x-icon" href="images/Icon.png" />
<link rel="stylesheet" type="text/css" href="styles/base.css" />

</head>
<body background="images/bg.gif">
	
	<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>
	</div>
	
	<div id="authorgraph"><img alt="" src="images/autograph.gif"></div>
	
	<script type="text/javascript" src="scripts/jquery-1.8.2.js"></script>
	<script type="text/javascript">
		
		/* 提交结果,执行ajax */
		function btn(){
			
			var $btn = $("input.btn");//获取按钮元素
			//给按钮绑定点击事件
			$btn.bind("click",function(){
				
				$.ajax({
					type:"post",
					url:"excuteAjaxJsonAction",//需要用来处理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){
						var d = eval("("+data+")");//将数据转换成json类型,可以把data用alert()输出出来看看到底是什么样的结构
						//得到的d是一个形如{"key":"value","key1":"value1"}的数据类型,然后取值出来
						
						$("#s_name").text(""+d.name+"");
						$("#s_age").text(""+d.age+"");
						$("#s_position").text(""+d.position+"");
						
					},
					error:function(){
						alert("系统异常,请稍后重试!");
					}//这里不要加","
				});
			});
		}
	
		/* 页面加载完成,绑定事件 */
		$(document).ready(function(){			
			btn();//点击提交,执行ajax
		});
	</script>
</body>
</html>

JsonAction.java代码

package com.simpleton.demo.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 com.opensymphony.xwork2.ActionSupport;

public class JsonAction extends ActionSupport implements ServletRequestAware{
	private static final long serialVersionUID = 1L;
	
	private HttpServletRequest request;
	private String result;

	public void setServletRequest(HttpServletRequest arg0) {
		this.request = arg0;
	}
	public String getResult() {
		return result;
	}
	public void setResult(String result) {
		this.result = result;
	}
	
	/**
	 * 处理ajax请求
	 * @return SUCCESS
	 */
	public String excuteAjax(){
		
		try {
			//获取数据
			String name = request.getParameter("name");
			int age = Integer.parseInt(request.getParameter("age")); 
			String position = request.getParameter("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赋值,传递给页面
		} catch (Exception e) {
			e.printStackTrace();
		}
		return SUCCESS;
	}


	
}

struts.xml中

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	
	<!--解决乱码    -->
	<constant name="struts.i18n.encoding" value="UTF-8"></constant> 
	
	<package name="simpleton" extends="struts-default,json-default">
		
		<action name="*JsonAction" method="{1}" class="com.simpleton.demo.action.JsonAction">
			<result name="fail"></result>
			<!-- 返回json类型数据 -->
			<result type="json">
				<param name="root">result<!-- result是action中设置的变量名,也是页面需要返回的数据,该变量必须有setter和getter方法 --></param>
			</result>
		</action>
		
	</package>
	
</struts>

这样就可以完成一个简单json数据类型传递的demo了。


下面附上源码文件(百度网盘),基于eclipse开发,导入即可运行(2016-4-9 更新了可用链接):http://pan.baidu.com/s/1jIct3aI



© 著作权归作者所有

共有 人打赏支持
十月阳光
粉丝 26
博文 84
码字总数 49491
作品 0
成都
程序员
加载中

评论(9)

十月阳光
十月阳光

引用来自“ma宝C”的评论

勘误 : ajax回调中的 data 为 {"key":"value","key1":"value1"} ; d为 [object Object] 。。。亲测
感谢勘误,这个是以前大学学习的时候用的,现在好久都没用过了。
风之丨旅人
风之丨旅人
勘误 : ajax回调中的 data 为 {"key":"value","key1":"value1"} ; d为 [object Object] 。。。亲测
十月阳光
十月阳光

引用来自“李之铭”的评论

82谢谢你的分享,我问题解决了
过了这么多年,这篇博客还能继续发挥光和热也挺好
李之铭
李之铭
82谢谢你的分享,我问题解决了
G
Graces

引用来自“只是过路人”的评论

引用来自“StateGrace”的评论

很简单的

什么时候我也去学学,我以前学的时候看过在struts.xml中也可以过滤

是可以过滤的,支持正则方式过滤。看看源码就明白了。
十月阳光
十月阳光

引用来自“StateGrace”的评论

很简单的

什么时候我也去学学,我以前学的时候看过在struts.xml中也可以过滤
G
Graces
很简单的
十月阳光
十月阳光

引用来自“StateGrace”的评论

直接用json插件不就好了?把没用的属性过滤掉

那个还没试过...
G
Graces
直接用json插件不就好了?把没用的属性过滤掉
struts2+jquery 实现ajax无刷新更新数据

前几天为了实现一个struts 的 ajax无刷新更新数据的例子,发现网上资料很少,很多已经过时或者链接都失效了 不过整合他们的资料,加上自己的研究,终于实现了效果 要求:1、各个学院提交学生...

murongqingsi ⋅ 2015/09/28 ⋅ 0

Struts2+jquery 以ajax方式 实现jsp跟后台交互

功能:利用struts2+ajax从后台获取数据,并且数据以json格式传递 必备组建:struts2,juqery,struts2 json 插件 步骤: 1.ation应该继承 ActionSupport package com.thtf.lotterymanager.index....

lhsqjoe ⋅ 2013/09/13 ⋅ 0

Ajax + Json 基本用法(自整理)

Asynchronous javaScipt and Xml 什么是Ajax:异步访问服务器,不刷新页面!不是一项新技术,整合了几项技术组成.主要目的是为了提高用户体验度 执行流程: 在用户界面触发事件调用javaScipt,通...

SLoan_ ⋅ 2016/09/06 ⋅ 0

挪威森林/mini-ajax.js

#mini-ajax.js -(1)Ajax.get(url,data,callback,dataType); -(2)Ajax.post(url,data,callback,dataType); -(3)Ajax.json(url,data,callback); -(4)Ajax.upload(),ajax 文件上传后期实现 -参数......

挪威森林 ⋅ 2015/10/23 ⋅ 0

Jquery中AJAX参数详细介绍

在使用jquery的时候,我们经常用到jquery中对ajax的封装,下面对ajax函数的各参数详细说明和讲解,以便更好的理解和使用 $.get(url, data, callback,type) 和 $.post(url, data, callback, ...

凯文加内特 ⋅ 2015/01/28 ⋅ 0

SegmentFault 技术周刊 Vol.33 - 什么是 JSON ?

JSON 的全称是JavaScript Object Notation,可以翻译为 JavaScript 对象表示法,即将一个 Object 以文本的方式给记录下来。 根据 ECMA-404 标准: JSON is a text format that facilitates s...

keke ⋅ 2017/09/07 ⋅ 0

详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJ

只有$.ajax是以一个完整的对象{}来发送请求的,其他的比如$.get(),$.post()都不是. 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参...

文文1 ⋅ 2015/03/27 ⋅ 0

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

本文是对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),...

zyt_1978 ⋅ 2016/08/20 ⋅ 0

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函...

Zero零_度 ⋅ 2016/04/03 ⋅ 0

Asp.Net MVC 使用 Ajax

Asp.Net MVC 使用 Ajax Ajax 简单来说Ajax是一个无需重新加载整个网页的情况下,可以更新局部页面或数据的技术(异步的发送接收数据,不会干扰当前页面)。 Ajax工作原理 Ajax使浏览器和服务...

JoeSnail ⋅ 2017/11/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部