struts2+jquery实现ajax

简单介绍struts+jquery实现ajax步骤,前提是你了解struts2 和jquery,

要求:从页面上点击一个button,从action中获取数据,当然是异步刷新,项目开发中一般还要附带一些带条件的数据传到action中(如分页信息,当前页,等)

第一步:

新建一个web项目

把struts需要的jar包copy到lib里面,还要其他包json.jar等,可以随后下载。

增加一个struts.xml文件

  第二步:

在web.xml中如下配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<filter>
		<!-- 定义核心Filter的名字 -->
		<filter-name>struts2</filter-name>
		<!-- 定义核心Filter的实现类 -->
		<filter-class>
			org.apache.struts2.dispatcher.FilterDispatcher
			</filter-class>
	</filter>

	<!-- FilterDispatcher用来初始化Struts 2并且处理所有的Web请求 -->
	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	
</web-app>

 第三步:页面的信息如下

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

 

		<div id="result">

		</div>

		
Name:<input type="text" name="user.name">
Age:<input type="text" name="user.age">
<input type="button" id="btn" value="查看">
	</body>

 

第四步:action类 user实体类

 

public class JsonAction extends ActionSupport {
	private static final long serialVersionUID =

	7044325217725864312L;

	private User user;

	// 把从返回的结果保存中data中

	private String data;

	//省略set get方法

	public String execute() throws Exception {
// 此处的this.user,是从页面得到的数据封装成了一个User对象
	System.out.println(this.user.getAge()+":"+this.user.getName());
	//在这里模拟从数据库中得到的数据 当然也可以是List<User>
// JSONArray js = new JSONArray(); //只是 针对json数组
 //js.add(u);
// js.add(u2);
//js.toString();

		User u =  new User();
		u.setAge(22);
		u.setName("MMMMM");
		JSONObject jo = JSONObject.fromObject(u); //针对json对象
		System.out.println(jo);

// 调用json对象的toString方法转换为字符串然后赋值给data

		this.data = jo.toString();

		return this.SUCCESS;

	}

 

User.java

	private String name;
	private int age

 

第五步:配置struts.xml

<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<constant name="struts.i18n.encoding" value="UTF-8"></constant>
	<package name="ttttt" extends="json-default">
		<action name="jsonAction" class="com.action.JsonAction">

			<result type="json">
				<!-- 因为要将reslut的值返回给客户端,所以这样设置 -->
				<!-- root的值对应要返回的值的属性 -->
				<param name="root">result</param>
			</result>

		</action>
	</package>
</struts>

 第六步:开始写页面的js ,展示返回的数据

$(document).ready(function() {


// 直接把onclick事件写在了JS中

$("#btn").click(function() {

// 序列化表单的值
			
			var params = $("input").serialize();
			$.ajax({
			// 请求的url
			url : "jsonAction.action",
			// 发送方式
			type : "post",
			// 接受数据格式
			dataType : "json",
			// 要传递的数据
			data : params,
			// 回传函数
			success : querydata
			
			});
			});
			});
			
			function querydata(data) { 
			
			var json = eval( "("+data+")" );
			
			var str = "姓名:" + json.name + "<br />";
			 str += "年龄:" + json.age + "<br />";
			
			$("#result").html(str);
}


 第七步:

部署访问

就可以看到只是局部刷新

下边的项目访问:http://localhost:8080/a/index22.jsp 所有的jar包都在lib中 如导入有错的话,请新建项目之后copy src目录和webRoot即可

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值