`
panpan123mail
  • 浏览: 33470 次
  • 性别: Icon_minigender_1
  • 来自: SpringHill
社区版块
存档分类
最新评论

struts2 + jquery + json 进行ajax请求（转载及补充）

AjaxjsonjQueryStrutsJavaEE 
阅读更多

第一步：创建 名为"ajax" 的 Java Web项目。


第二步：加入struts2的jar包，这里需要四个包 freemarker.jar  ognl.jar  struts2-core.jar  commons-fileupload.jar  commons-io.jar   xwork-core-2.1.6.jar（这个包加上版本号，是因为下文要提到它），这六个包是struts必须依赖的jar包，什么好说的。

 

第三步：修改 web.xml 加入 struts的过滤器，代码如下：

view plaincopy to clipboardprint?
<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="2.5"   
    xmlns="http://java.sun.com/xml/ns/javaee"   
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 
      
    <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> 
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
   
    <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>
 

 

第四步：加入json的包，这里需要两个：json-lib.jar  jsonplugin.jar 这里要注意很重要的一点，因为json大量引用了Apache commons的包，所以这里要一并加入，需要的commons包共4个，除了commons的包外，还需要引入一个 ezmorph的包，所以这一步一共要引入7个包，列出如下：commons-collections.jar  commons-lang.jar  commons-beanutils.jar  commons-logging.jar  ezmorph.jar 再加上json的两个包共七个，一次性加入。

 

第五步：写后台处理AjaxLoginAction.action，内容如下：

view plaincopy to clipboardprint?
package qy.test.action;  
 
import java.util.HashMap;  
import java.util.Map;  
 
import net.sf.json.JSONObject;  
 
import com.opensymphony.xwork2.ActionSupport;  
 
public class AjaxLoginAction extends ActionSupport {  
 
    // 用户Ajax返回数据  
    private String result;  
 
    // struts的属性驱动模式，自动填充页面的属性到这里  
    private String loginName;  
    private String password;  
 
    @Override 
    public String execute() {  
 
        // 用一个Map做例子  
        Map<String, String> map = new HashMap<String, String>();  
 
        // 为map添加一条数据，记录一下页面传过来loginName  
        map.put("name", this.loginName);  
 
        // 将要返回的map对象进行json处理  
        JSONObject jo = JSONObject.fromObject(map);  
 
        // 调用json对象的toString方法转换为字符串然后赋值给result  
        this.result = jo.toString();  
 
        // 可以测试一下result  
        System.out.println(this.result);  
 
        return SUCCESS;  
 
    }  
 
    //getter  setter 方法省略  
} 
package qy.test.action;

import java.util.HashMap;
import java.util.Map;

import net.sf.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxLoginAction extends ActionSupport {

    // 用户Ajax返回数据
    private String result;

    // struts的属性驱动模式，自动填充页面的属性到这里
    private String loginName;
    private String password;

    @Override
    public String execute() {

        // 用一个Map做例子
        Map<String, String> map = new HashMap<String, String>();

        // 为map添加一条数据，记录一下页面传过来loginName
        map.put("name", this.loginName);

        // 将要返回的map对象进行json处理
        JSONObject jo = JSONObject.fromObject(map);

        // 调用json对象的toString方法转换为字符串然后赋值给result
        this.result = jo.toString();

        // 可以测试一下result
        System.out.println(this.result);

        return SUCCESS;

    }

    //getter  setter 方法省略
}
 

 

第六步：写前台index.jsp，注意加入 jquery的js文件 内容如下：

view plaincopy to clipboardprint?
<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>  
        <mce:script type="text/javascript"><!--  
    $(document).ready( function() {  
          
        //使用 Ajax 的方式 判断登录  
        $("#btn_login").click( function() {  
              
            var url = 'ajaxLogin.action';  
              
            alert("===");  
              
            //获取表单值，并以json的数据形式保存到params中  
            var params = {  
                loginName:$("#loginName").val(),  
                password:$("#password").val(),  
            }  
            //使用$.post方式      
            $.post(  
              
                url,        //服务器要接受的url  
                  
                params,     //传递的参数       
                  
                function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据  
                  
                    //alert(data);  
                    var member = eval("("+data+")");    //包数据解析为json 格式    
              
                    $('#result').html("欢迎您：  "+member.name);  
                      
                },   
                  
                'json'  //数据传递的类型  json  
              
            );  
          
        });  
          
    });  
// --></mce:script>  
    </head>  
    <body>  
        <span>用户名：</span>  
        <input type="text" id="loginName" name="loginName">  
        <br />  
 
        <span>密码：</span>  
        <input type="password" name="password" id="password">  
        <br />  
 
        <input type="button" id="btn_login" value="Login" />  
        <p>  
            这里显示ajax信息：  
            <br />  
            <span id="result"></span>  
        </p>  
    </body>  
</html> 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>
        <mce:script type="text/javascript"><!--
    $(document).ready( function() {
       
        //使用 Ajax 的方式 判断登录
        $("#btn_login").click( function() {
           
            var url = 'ajaxLogin.action';
           
            alert("===");
           
            //获取表单值，并以json的数据形式保存到params中
            var params = {
                loginName:$("#loginName").val(),
                password:$("#password").val(),
            }
            //使用$.post方式   
            $.post(
           
                url,        //服务器要接受的url
               
                params,        //传递的参数       
               
                function cbf(data){    //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
               
                    //alert(data);
                    var member = eval("("+data+")");    //包数据解析为json 格式 
           
                    $('#result').html("欢迎您：  "+member.name);
                   
                },
               
                'json'    //数据传递的类型  json
           
            );
       
        });
       
    });
// --></mce:script>
    </head>
    <body>
        <span>用户名：</span>
        <input type="text" id="loginName" name="loginName">
        <br />

        <span>密码：</span>
        <input type="password" name="password" id="password">
        <br />

        <input type="button" id="btn_login" value="Login" />
        <p>
            这里显示ajax信息：
            <br />
            <span id="result"></span>
        </p>
    </body>
</html>

 

第七步：在src目录下加入struts.xml，并配置相应的xml文件，为ajax请求提供数据。代码如下：

view plaincopy to clipboardprint?
<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE struts PUBLIC  
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
    "http://struts.apache.org/dtds/struts-2.0.dtd"> 
 
<struts> 
 
    <package name="ajax" extends="json-default"> 
        <action name="ajaxLogin" class="qy.test.action.AjaxLoginAction"> 
 
            <!-- 返回类型为json 在sjon-default中定义 --> 
            <result type="json"> 
 
                <!-- root的值对应要返回的值的属性 --> 
                <!-- 这里的result值即是 对应action中的 result --> 
                <param name="root">result</param> 
            </result> 
        </action> 
    </package> 
 
</struts> 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

    <package name="ajax" extends="json-default">
        <action name="ajaxLogin" class="qy.test.action.AjaxLoginAction">

            <!-- 返回类型为json 在sjon-default中定义 -->
            <result type="json">

                <!-- root的值对应要返回的值的属性 -->
                <!-- 这里的result值即是 对应action中的 result -->
                <param name="root">result</param>
            </result>
        </action>
    </package>

</struts>
 

 

第八步：如果第四步没有加入commons-logging.jar包，这里要记得加入

 

第九步：发布运行。很不幸，你会发现一个错误，

java.lang.ClassNotFoundException: com.opensymphony.xwork2.util.TextUtils:

这是struts的版本错误，因为用的xwork2.1.6-core.jar中不存在TextUtils类，这里把 xwork2.1.2-core.jar也加到classpath中，xwork2.1.2-core.jar中包含这个东西，我们用的是xwork2.1.6的jar，当要用到TextUtils时，就去xwork2.1.2-core.jar中找。



以上出自：http://blog.csdn.net/zhqingyun163/archive/2010/01/18/5208766.aspx

 

经过自己的摸索后把整个过程实现打包如下：

分享到：
| 应用程序配置不正确，程序无法启动的问题
评论
6 楼 ring09h 2010-03-20  
问个问题，如果业务层抛出自定义异常，比如不能删除XXX，原因XXX，要给操作者看的，这个东西怎么显示出来呢？
5 楼 jimmeytang 2010-03-18  
<p>这是我看过最好的一本Jquery的书籍，下载：<a href="http://www.8211.cn/books/list/book_11673.html" target="_blank">锋利的jquery(高清析版) </a></p>
4 楼 tanzhengping11 2010-03-18  
在ie6上终于可以了。是因为楼在一个地方了多一个逗号。
   //获取表单值，并以json的数据形式保存到params中
            var params = {
                loginName:$("#loginName").val(),
                password:$("#password").val(),
            }

去掉 password:$("#password").val()后面的哪个逗号。

大家试下。

3 楼 gundumw100 2010-01-24  
楼主完成了一个什么样的功能呢，先提示一下，有兴趣再看下去
2 楼 JavaEye4Cwy 2010-01-23  
属性驱动的话，可以用 $.getJSON 方式获得，
不必 eval(..)，也不必采用 JSONObject.fromObject之类的方式。
直接像一般 Action那样写就OK了。

IE6,7,8, 火狐等等通过。

楼主的文章好像一直重复。
1 楼 liangsongzhe 2010-01-22  
IE 7 里不好是吧 ?

我的Maxthon 里不好使,内核是IE7

我的iE8 和FF3.5 里好使
发表评论

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

相关推荐

    Struts2 + jQuery+JSON 实现ajax

    ### Struts2 + jQuery + JSON 实现Ajax 在现代Web开发中，Ajax技术因其能够实现网页的局部刷新而被广泛采用。本篇文章介绍如何利用Struts2框架结合jQuery与JSON来构建一个简单的Ajax功能。 #### 一、环境搭建 1. ...

    Struts2+jQuery（不用JSON）实现局部刷新

    - **jQuery的AJAX请求**：使用jQuery的$.ajax()方法，设置URL为Struts2的Action路径，成功回调函数内解析响应内容并更新DOM。 5. **示例代码**： - Struts2 Action代码可能如下： ```java public class ...

    struts2+jquery+json+ajax例子

    Struts2、jQuery、JSON和Ajax是Web开发中常见的技术栈，它们共同为构建动态、交互式的用户界面提供了强大的支持。下面将详细解释这些技术及其在登录示例中的应用。 Struts2是一个基于MVC（Model-View-Controller）...

    struts2+jQuery+json实现AJAX.zip

    struts2+jQuery+json实现AJAX.zip

    struts2+ajax+jquery

    在这个"struts2+ajax+jquery"的主题中，我们将深入探讨如何利用Struts2、jQuery和Ajax技术实现Web页面的异步交互。 首先，Struts2作为MVC框架，它的核心是Action，它负责处理用户的请求，并通过配置的Result返回...

    SSH+jQuery+json 实现的Ajax操作，绝对精华，代码简练清晰，绝对能看明白

    1. **AJAX函数**：jQuery提供了$.ajax()函数，可以方便地发起异步请求，与服务器进行数据交换。在级联操作中，这通常用于获取下拉列表的选项，如省份选择后获取对应的城市列表。 2. **链式操作**：jQuery的链式调用...

    Struts2+Jquery+Ajax

    在Struts2框架下，我们可以使用Jquery的Ajax方法向服务器发送请求，获取JSON或XML数据，然后动态更新页面的部分内容。 在"06-mvc之struts2.ppt"中，可能涵盖了以下内容： 1. Struts2框架的基本概念和架构 2. 如何...

    struts2+jquery+json+ajax

    这个教程可能详细介绍了如何集成这四者，比如设置Struts2的JSON插件，创建Action来返回JSON数据，编写jQuery代码来发送Ajax请求，以及如何在前端解析和显示JSON数据。通过学习和实践这个例子，开发者可以深入理解...

    struts2+json+jquery实现ajax数据的存取

    "Struts2+JSON+jQuery实现Ajax数据的存取"就是一个典型的示例，它结合了强大的MVC框架Struts2、轻量级的数据交换格式JSON以及高效的前端库jQuery，以实现网页上的无刷新数据交互。下面将详细介绍这三个技术及其在...

    json+jquery+struts2+ajax

    struts2 json jquery ajax实现用户登陆及业面跳转

    Struts2+Jquery+ajax+Json代码案例

    在“jsa03”这个文件中，可能包含了相关的JavaScript代码，这些代码负责与Struts2 Action进行Ajax通信，使用jQuery发送请求并处理返回的JSON数据。例如，可能有一个函数用于向服务器发送请求，获取数据，然后使用$....

    struts2+jquery+json+ajax的使用

    总结来说，这个"ProductSystem"项目通过整合Struts2、jQuery、JSON和Ajax技术，实现了高效的前后端数据交互，提供了动态的用户界面，是学习和实践这些技术的好例子。通过深入理解并实践这个项目，开发者可以更好地...

    struts2+spring+hibernate+jquery+json

    Struts2、Spring、Hibernate、jQuery 和 JSON 是五个在IT行业中极为重要的技术组件，它们各自在Web应用开发中扮演着不同的角色。这篇文章将详细介绍这些技术的整合使用以及它们的功能。 首先，Struts2 是一个基于 ...

    struts2+json+ajax+jquery

    Struts2、JSON、Ajax 和 jQuery 是Web开发中的四个关键技术，它们共同构建了现代Web应用程序的数据交互和用户界面交互的核心部分。 Struts2 是一个基于MVC（Model-View-Controller）架构的Java Web框架，它使得...

    struts2+json

    这个资源"struts2+json"显然涉及到在Struts2框架下实现JSON（JavaScript Object Notation）数据交换，这是一种轻量级的数据交换格式，广泛用于前后端交互，特别是AJAX（Asynchronous JavaScript and XML）请求。...

    一个简单的struts2+json+jquery 交互的例子

    当用户界面触发某个事件（比如点击按钮），jQuery会发起Ajax请求，Struts2 Action执行相关逻辑并生成JSON响应，最后jQuery将数据插入到网页中，完成一次完整的交互。 总结来说，这个例子展示了如何利用Struts2处理...

    Struts+Jquery+Ajax+Json应用实例

    在"Struts+Jquery+Ajax+Json应用实例"中，前端使用jQuery库来监听用户事件，比如点击按钮。当事件触发时，jQuery通过Ajax发送一个HTTP请求到后端的Struts Action。在Struts框架中，这个Action会处理请求，执行必要的...

    struts2+jquery+json

    例如，当用户在前端进行某些操作（如点击按钮），jQuery会发送Ajax请求到Struts2的Action，Struts2处理请求并以JSON格式返回响应，jQuery接收到数据后动态更新页面元素，如表格、列表或其他UI组件。 在实际应用中，...

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