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

sunxin1001

浏览: 304916 次
性别:
来自: 北京

最近访客更多访客>>

wconvey

wangjun796

liuluwdy

superlxing

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (177)

社区版块

存档分类

json jQuery Struts Ajax JavaScript

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

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>

<title>My JSP 'index.jsp' starting page</title>

<s:head theme="ajax" />

</head>

<body>

</div>

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

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

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

提交

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

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

分享到：

ssh2 整合开始 | JSON 入门

2009-08-25 18:05
浏览 9232
评论(1)
查看更多

1 楼 flyingpig4 2010-03-06

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

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论