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