jquery+struts2+json　入门例子 -

871656094

浏览: 73774 次
性别:
来自: 南京

最近访客更多访客>>

dawson119

z9780420

duanfei

loveteam111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery+struts2+json　入门例子

json jQuery Struts JSP Apache

http://hzylyl.blog.163.com/blog/static/33097164200942433016288/

struts2中自带了struts2-json-plugin-2.1.8.1.jar

最近我接手一个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");

//在这里我们可以看到提交数据是authorid:authorid,authorname:authorname这样来，而且我们后台是通过request来获

//取，这样不管是阅读还是写起都很麻烦，也想过是否可以这个person.authorid:authorid。想法是不错，可惜不行。

//以前以为没有办法实现像struts2那样person.authorid。最近一个项目，又重新用到这个。发现原来在这里也可以这样写。//只是在person.authorid加双引号。即"person.authorid":authorid，而且在action中也没有必须实现ServletRequestAware。

//还不用写person.setAuthorid(request.getParameter("authorid"));这种语句。直接就是定义person，然后再有person的set//和get的方法就可以啦。与struts2表单提交是一样的。

}

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打开该链接就可以看到效果啦!

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

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

分享到：