`
sunxin1001
  • 浏览: 309340 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Struts2 + jQuery 的简单例子使用 JSON 插件的使用

阅读更多

JSON插件提供了一种名为json的ResultType,一旦为某个Action指定了一个类型为json的Result,则该Result无需映射到任何视图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据,并将该数据返回给客户端页面的JavaScript 。

 

简单地说,JSON插件允许我们在JavaScript中异步调用Action,而且Action不再需要使用视图资源来显示该Action里的状态信息,而是由JSON插件负责将Action里的状态信息返回给调用页面——通过这种方式,就可以完成Ajax交互。

1、将struts2的json插件加入web工程的lib,jsonplugin的下载地址:http://code.google.com/p/jsonplugin/downloads/list

2、struts.xml添加专为ajax使用的package 

 <package name="ajax" extends="json-default">
        
<action name="ajaxRequest"  class="org.david.struts2.HelloWorld">
            
<result type="json"></result>
        
</action>
</package>        
             
3、在页面中引入 jquery的js文件库       

    <SCRIPT type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
 
<SCRIPT type="text/javascript">
            
function clickButton()
            
{    
                
var url = 'ajaxRequest.action';
                
var params = {
                        name:$('#name').attr('value'),
                           contactEmail:$('#contactEmail').attr('value'),
                           subject:$('#subject').attr('value'),
                           content:$('#content').attr('value')                

                       }; //通过id获得输入值
                 jQuery.post(url, params, callbackFun, 'json');

      

               } //url:响应aciton;params:传入参数;callbackFun:响应完成后的回调函数;
            

               function callbackFun(data)
            
{
                 alert("SUCCESS");
                }

     
</SCRIPT>

4、action逻辑与普通的ation写法无大区别。

     JSON将Action里的状态信息序列化成JSON格式的数据

 

 

细节部分我就不多讲了,因为我也不会,就讲讲我是如何调试出来我的第一个JSON使用的吧

采用的框架有:Struts2 、 JQuery 、 JSON


按着步骤来吧:


 1.新建一个Web工程


导入包列表:

 


 目录结构如图:

 


 2.建立实体类User

package model;


public class User


private String name;

private int age;

 //省略相应的get和set方法
 


 3.建立Action JsonAction

public class JsonAction extends ActionSupport{

private static final long serialVersionUID =

 7044325217725864312L;


private User user;

//用于记录返回结果

private String result;


//省略相应的get和set方法


@SuppressWarnings("static-access")


public String execute() throws Exception {


//将要返回的user实体对象进行json处理

JSONObject jo = JSONObject.fromObject(this.user);

//打印一下,格式如下

//{"name":"风达","age":23}

System.out.println(jo);


//调用json对象的toString方法转换为字符串然后赋值给result

this.result = jo.toString();


return this.SUCCESS;

}


}
 


 4.建立struts.xml文件

<?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>

<constant name="struts.i18n.encoding" value="UTF-8"></constant>

<package name="ttttt" extends="json-default">

<action name="jsonAction" class="action.JsonAction">

<result type="json" >

<!-- 因为要将reslut的值返回给客户端,所以这样设置 -->

<!-- root的值对应要返回的值的属性 -->

<param name="root">

result

</param>

</result>

</action>

</package>

</struts>

 


 5.编写index.jsp文件

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">


<title>My JSP 'index.jsp' starting page</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">


<!-- basePath用来获取js文件的绝对路径 -->

<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>

<script type="text/javascript" src="<%=basePath%>js/index.js"></script>

<s:head theme="ajax" />

</head>


<body>

<div id="result">

</div>

<s:form name="userForm" action="" method="post">

<s:textfield label="用户名" name="user.name" />

<s:textfield label="年龄" name="user.age" />

<button>

提交

</button>

</s:form>


</body>

</html>

 


 6.在WebRoot目录下建立js文件件,将jquery.js文件放到文件夹下,然后再建立文件index.js


$(document).ready(function() {


// 直接把onclick事件写在了JS中

$("button").click(function() {

// 序列化表单的值

var params = $("input").serialize();


$.ajax({


// 后台处理程序

url : "jsonAction.action",


// 数据发送方式

type : "post",


// 接受数据格式

dataType : "json",


// 要传递的数据

data : params,


// 回传函数

success : update_page


});

});


});

function update_page(result) {

var json = eval( "("+result+")" );

var str = "姓名:" + json.name + "<br />"; str += "年龄:"

+ json.age + "<br />";

$("#result").html(str);


}
 


 7.运行前效果:

 

要的是效果,布局就不整了

 


运行后效果:

 

 


网上相关的信息太少了,很多Struts2+JQuery+JSON的教程,点开链接之后都是那几篇文章转了又转,遇到问题真的很想找到有用的信息,或许是我太笨了,找不到,或许就是网上相关的信息就很少。这个实例很简单是不是,但是为了调试出这个程序,我费了一天的时间。


上面的实例成功了,但是问题又出来了

视图类型仅仅设置了json

那么输入校验出错的时候怎么显示?

 

分享到:
评论
1 楼 flyingpig4 2010-03-06  
为什么我设置username的时候为中文就报错了呢?
我想问下你是怎么解决乱码的。。
网上基本没看到这样的例子,
难道就我一人遇到struts2+jquery+json从action中传值过去js当中出现乱码的情况?
有些邪门..
望指教:
flyallen5@hotmail.com

相关推荐

    struts2+jquery+json+ajax例子

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

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

    接着,我们需要配置Struts2的JSON插件,以支持JSON输出。这通常涉及在struts.xml配置文件中添加特定的拦截器栈,确保JSON结果类型能够被正确处理。 在前端,我们可以使用jQuery来发起Ajax请求,通过$.ajax()或$.get...

    Json+Struts2+JQuery及JQuery相关插件的例子,json架包...

    通过这个例子,你可以学习到如何在实际项目中结合使用Struts2、JQuery和JSON,包括如何配置Struts2的JSON插件,如何在JQuery中处理JSON数据,以及如何利用JQuery的插件来美化和增强用户界面。同时,理解和掌握JSON的...

    struts2+json

    在Struts2中集成JSON支持,首先需要添加相应的依赖,比如struts2-json-plugin,这个插件提供了JSON结果类型。当Action执行完毕后,可以返回一个JSON结果类型,Struts2会自动将Action的属性转换为JSON格式并返回给...

    struts2+spring+hibernate+jquery+dwr+json

    标题 "struts2+spring+hibernate+jquery+dwr+json" 描述了一个集成的Web应用程序开发框架,其中包含了多个关键技术和库。这个框架旨在提高开发效率,提供灵活的数据管理,以及用户友好的前端交互。 1. Struts2:...

    struts2+ajax+jquery

    这里的`MyAction`类会处理请求并设置模型数据,然后Struts2的JSON插件会将这些数据转化为JSON格式并返回给前端。在`success.jsp`页面,我们可以用jQuery解析并展示这些数据。 此外,Struts2还提供了一个名为`struts...

    struts2+jQuery+json 实例

    - **Struts2 Action响应JSON**: 在Struts2 Action中,可以使用Struts2的JSON插件来构建并返回JSON响应。例如,将一个Java对象转换为JSON: ```java public class YourAction extends ActionSupport { private Your...

    struts2+jQuery+json 实例 测试过了 运行成功 从别人那偷来的

    在"struts2+jQuery+json"的实例中,Struts2负责处理后端的业务逻辑和数据管理,当用户触发一个操作(如点击按钮)时,jQuery会发送一个Ajax请求到服务器。这个请求通常包含一些参数,这些参数可能是通过jQuery从DOM...

    struts2+jquery执行ajax并返回json类型数据(源码)

    确保已经配置了JSON插件,以便Struts2能够正确地序列化Java对象为JSON格式。 3. **前端HTML页面**:创建一个HTML页面,包含jQuery库和你的JavaScript代码。在这里,使用`$.ajax()`方法设置请求参数,例如URL(指向...

    Struts2+hibernate3+JQuery+ajax+json三级联动

    在Struts2中,可以通过Json插件将Java对象转换为Json格式,然后发送给前端。JQuery可以方便地解析这个Json响应,更新页面元素。 至于"Test3List"这个文件,可能是测试用例或者表示三级联动中每一级的数据列表。这...

    使用struts2+JQuery实现的简单的ajax例子

    在这个简单的Ajax例子中,我们将探讨如何整合Struts2和jQuery来实现页面无刷新的数据更新。 首先,我们需要在项目中引入Struts2和jQuery的相关依赖。Struts2通常通过Maven或Gradle添加依赖库,包括核心库、struts2-...

    struts2+easyUI+ajax+json用户登验证

    Struts2、EasyUI、Ajax 和 JSON 是现代Web开发中常用的技术栈,它们结合使用可以构建出高效、交互性强的用户界面。以下是对这些技术及其在用户登录验证中的应用的详细解释。 **Struts2** 是一个基于MVC(Model-View...

    struts2+jquery+json+ajax

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

    flexigrid+struts2+json+jquery实例

    在这个实例中,Flexigrid与Struts2、JSON和jQuery进行了集成,构建了一个功能丰富的Web应用。 Struts2是Apache软件基金会的一个开源MVC框架,用于构建Java Web应用程序。它提供了强大的动作调度、拦截器机制以及...

    struts2+jquery实例

    例如,可以使用jQuery的Ajax方法,配合Struts2的JSON插件,实现前后台的数据交换,从而创建响应式、无刷新的界面。 **Spring与Struts2的整合** Spring可以作为Struts2的依赖注入容器,为Struts2 Action提供依赖对象...

    struts2使用jquery整合ajax、json用户登录实例源码

    在Struts2中,我们可以通过添加JSON插件来支持JSON响应。例如,可以在struts.xml配置文件中添加以下配置: ```xml &lt;package name="default" namespace="/" extends="struts-default"&gt; &lt;result type="json"&gt; ...

    使用Struts2的JSON插件来实现JSON数据传递

    Struts2 JSON插件的安装与配置是使用其功能的第一步。首先,你需要将struts2-json-plugin相关的JAR文件添加到项目的类路径中。然后,在Struts2的配置文件struts.xml中启用JSON插件,通常通过以下配置实现: ```xml ...

    struts2+json_jquery

    在前端,我们可以使用jQuery来发送AJAX请求,获取Struts2 Action返回的JSON数据,并动态更新页面。例如: ```javascript $(document).ready(function() { $.ajax({ url: 'getData.action', type: 'GET', ...

    Struts2之ajax初析的并结合jquery一个例子

    Web2.0的随波逐流,Ajax那是大放异彩,Struts2框架自己整合了对Ajax的原生支持(struts 2.1.7+,之前的版本可以通过插件实现),框架的整合只是使得JSON的创建变得异常简单,并且可以简单的融入到Struts2框架中,...

    jquery ajax json struts2最简单例子测试成功

    在"jquery ajax json struts2最简单例子测试成功"的项目中,我们可以推断出以下几个关键点: 1. **整合jQuery与AJAX**:项目中可能使用jQuery的$.ajax()方法来发送异步请求。$.ajax()提供了一种方式,通过HTTP GET...

Global site tag (gtag.js) - Google Analytics