简单介绍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即可