`

jquery+struts2+json　入门例子

jsonjQueryStrutsJSPWeb 
阅读更多

最近我接手一个J2EE项目,我是项目中期才进去,进去才发现这个问题,其界面显示和提交全部用jquery+strut2+json来实现的,其中我只熟悉struts2,那两都没用过,不过为了能够完成任务,只能从头学习了.在网上找了好多例子，可是感觉都已经是老版本的啦,新的写法已经有所不同,所以老是达不到想要的效果,不过经常几天的努力终于完成了第一个例子.该例子只用了一个regist.jsp,我们通过数据通过json方式提交,并返回数据回显到界面上.

开发环境：MyEclipse 6.0

jars :     commons-logging-1.0.4.jar

             freemarker-2.3.13.jar

             ognl-2.6.11.jar

             struts2-core-2.1.6.jar

             xwork-2.1.2.jar

            commons-fileupload-1.2.1.jar

json:     jsonplugin-0.33.jar

jquery:  jquery-1.3.1.js

把上面所列的jar放到lib文件夹下,在WebRoot下面新建一个js文件夹,把jquery-1.3.1.js复制其下面.

下面开始例子：

１.首先我新建一个名为 JSJWeb 的 Web Project

２.修改web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
    <display-name>Struts 2.0 Hello World</display-name>
    <filter>
        <filter-name>struts2</filter-name>       
        <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

 3.在src下面添加一个名叫struts.xml,内容如下:

<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <include file="struts-default.xml"/>
    <package name="tutorial" extends="struts-default">
        <action name="personAction" class="tutorial.action.PersonAction">
            <result>/regist.jsp</result>
        </action>
    </package>

    <constant name="struts.i18n.encoding" value="UTF-8"></constant>
   
    <package name="personjson" extends="json-default">
        <action name="personAjaxAction" class="tutorial.action.PersonAction">
            <result type="json"/>               
        </action>
    </package>

</struts>

4.在src中的tutorial.entity包下新建Person 实体类

package tutorial.entity;

public class Person {

    private String authorid;
    private String authorname;
    public String getAuthorid() {
        return authorid;
    }
    public void setAuthorid(String authorid) {
        this.authorid = authorid;
    }
    public String getAuthorname() {
        return authorname;
    }
    public void setAuthorname(String authorname) {
        this.authorname = authorname;
    }
}

5. 在src中的tutorial.action包下新建PersonAction Action类

package tutorial.action;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.interceptor.ServletRequestAware;
import tutorial.entity.Person;
import com.opensymphony.xwork2.ActionSupport;

public class PersonAction extends ActionSupport implements ServletRequestAware {
   
    private static final long serialVersionUID = 4787323253923443929L;

    private HttpServletRequest request;
   
    private Person person;


    @Override
    public void setServletRequest(HttpServletRequest request) {
        this.request = request;
    }

    public String ShowPersonInfo()
    {
        person = new Person();
        person.setAuthorid(request.getParameter("authorid"));
        person.setAuthorname(request.getParameter("authorname"));
        return SUCCESS;
    }
   
    public Person getPerson() {
        return person;
    }

    public void setPerson(Person person) {
        this.person = person;
    }
   
}

6.在WebRoot下面添加一个名为regist.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Regist.jsp</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">
    <script type="text/javascript" src="<%=basePath %>js/jquery-1.3.1.js"></script>
  </head>
  <script type="text/javascript">
  function showPersonInfo()
  {
      var authorid = $("#authorid").val();
      var authorname=$("#authorname").val();
    $.post("personAjaxAction!ShowPersonInfo.action",{authorid:authorid,authorname:authorname,user:user},callback,"json");
  }

  function callback(data)
  {
      var rs = data.person
     var html = "";
      html+="<table><tr><td>用户编号：</td><td>"+rs.authorid+"</td></tr><tr><td>用户名称：</td>     <td>"+rs.authorname+"</td></tr>";
    $("#showPersonInfo").html(html);
  }
  </script>
  <body>
    <form  name="eform" id="eform" method="post" onsubmit="return false;">
    用户编号：<input type="text" id="authorid" name="person.authorid"/><br>
    用户名称：<input type="text" id="authorname" name="person.authorname"/><br>
    <input type="button" value="submit" name="submit" onclick="showPersonInfo();"/>
    </form>
    <div id="showPersonInfo"></div>
 
  </body>
</html>

以上就是全部所要文件.

现在该是看看效果的时候了,http://localhost:8080/SSH/regist.jsp打开该链接就可以看到效果啦!

如果那里出错请提出来,请见谅,呵呵,谢谢!

本人表达有些问题,随便看看就好.

1
顶
0
踩
分享到：
| 给树加上右键菜单，及实现菜单相应功能
评论
1 楼 junjun16818 2011-02-21  
想请教一个问题 我在action 中 调用hibernate 执行sql语句 为什么就不能正常返回 callback 函数中  如果不执行hibernate 语句 就可以返回

语句执行没有什么问题  就是返回不了数据 好苦恼啊 难道不能用？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics