endual

浏览: 3558673 次
性别:
来自: 杭州

最近访客更多访客>>

wrgjwrrjurhj

sindyqiu

kristy_yy

whzresponse

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Struts2与extjs json（亲测成功

博客分类：

EXTJS

Struts2与extjs集成傻瓜教程

西南科技大学iSun团队黑色的月牙

背景：

最近学习在学习ext这个前台的界面框架，遇到一个难题就是不知道怎么让我们优秀的ext与我们优秀的struts集成起来，经过在网上的一番收索学习之后，做成了下面这个傻瓜教程。希望能对像我一样刚开始学习ext的朋友有帮助。

1准备工作：

除了平时引入的struts2的jar包以外，还需要引入struts2-json-plugin-2.1.8.1.jar；json-lib-2.1.jar这两个包。

Json介绍：

和XMl一样，JSON也是一种基于纯文本的数据格式。由于JSON天生好似为javascript准备的，因此JSON的数据格式非常的简单。想了解更多的关于JSON的知识请百度。。。

2．建立我们的model：User

package com.isun.model;

public class User {

private int id;

private String username;

private String password;

public int getId() {

return id;

}

public void setId(int id ) {

this .id = id;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this .username = username;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this .password = password;

}

3.建立我们的Action

这里是简单的演示struts-2与extjs的集成，所以全部的业务逻辑都放在Action中进行处理了。建立我们的LoginAction.当表单提交过来的时候我们也就能够在LoginAction中拿到数据了呵呵。

package com.isun.action;

import com.isun.model.User;

import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport{

private boolean success;

private String message;

private User user;

public String execute()throws Exception{

if (user.getUsername().equals("admin")&&user.getPassword().equals("admin")){

this .success = true ;

this .message = "你的账号是："+user.getUsername()+"密码为："+user.getPassword();

}else {

this .success = false ;

this .message = "对不起，未经授权的用户不能登录该系统！";

}

return SUCCESS ;

}

public boolean isSuccess() {

return success;

}

public void setSuccess(boolean success) {

this .success = success;

}

public String getMessage() {

return message;

}

public void setMessage(String message) {

this .message = message;

}

public User getUser() {

return user;

}

public void setUser(User user) {

this .user = user;

}

4.配置我们的struts.xml,注意extends=”json-default”

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

</action>

</package>

</struts>

5.在web.xml文件中陪上struts2

<?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-name>struts2</filter-name>

<filter-class>

org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

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

6.接下来是前台的页面，其中包括login.html(登陆的界面)，login.js（javascript代码），index.jsp(登陆成功后返回的界面)

Login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Extjs 学习</title>

</head>

<body>

</body>

</html>

Login.js

Ext.onReady(function (){

//使用表单提示

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget ="side";

//定义一个输入表单

var simple = new Ext.FormPanel({

labelWidth:40,

baseCls:'x-plain',

defaults:{width:180},

items:[{

xtype:'textfield',

fieldLabel:'账号',

name:'user.username',

allowBlank:false ,

blankText:'账号不能为空'

},{

xtype:'textfield',

inputType:"password",

fieldLabel:"密码",

name:'user.password',

allowBlank:false ,

blankText:"密码不能为空"

}],

buttons:[{

text:"提交",

type:"submit",

handler:function (){

if (simple.form.isValid()){

Ext.MessageBox.show({

title:"请等待",

msg:"正在加载",

progressText:"",

width:300,

progress:true ,

closable:false ,

animEl:'loding'

});

var f = function (v){

return function (){

var i = v/11;

Ext.MessageBox.updateProgress(i,'');

}

for (var i = 1; i < 13; i++){

setTimeout(f(i),i * 150);

}

//提交到服务器操作

simple.form.doAction("submit",{

url:"Login.action",

method:"post",

success:function (form,action){

document.location = 'index.jsp';

Ext.Msg.alert("登录成功！",action.result.message);

failure:function (form, action){

Ext.Msg.alert('登录失败',action.result.message);

}

});

}

},{

text:"重置",

handler:function (){

//重置表单

simple.form.reset();

}

}]

});

//定义窗体

var _window = new Ext.Window({

title:"登录窗口",

layout:"fit",

width:280,

height:150,

plain:true ,

bodyStyle:"padding:10px",

maximizable:false ,

closeAction:"close",

closable:false ,

collapsible:true ,

plain:true ,

buttonAlign:"center",

items:simple

});

_window.show();

});

Index.jsp

<%@ page language="java" contentType="text/html; charset=GB18030"

pageEncoding="GB18030"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

恭喜你登陆成功了！

</body>

</html>

这个是例子是我看到的最全的一个实例是转载的，在此感谢下博主

（http://blog.sina.com.cn/s/blog_6d0ec1c20100n73p.html）。

测试过了，能成功。如果你还不是成功，我愿意帮助你解决这个实例，我的QQ：1019990976，注明extjs struts2 sina 谢谢

分享到：

java 注解代码 | extjs form提交表单

2011-07-01 09:12
浏览 1767
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Struts2与extjs json（亲测成功

Struts2与extjs集成傻瓜教程

背景：

1准备工作：

2．建立我们的model：User

3.建立我们的Action

4.配置我们的struts.xml,注意extends=”json-default”

5.在web.xml文件中陪上struts2

6.接下来是前台的页面，其中包括login.html(登陆的界面)，login.js（javascript代码），index.jsp(登陆成功后返回的界面)

Login.html

Login.js

Index.jsp

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Struts2与extjs json（亲测成功

Struts2与extjs集成傻瓜教程

背景：

1准备工作：

2．建立我们的model：User

3.建立我们的Action

4.配置我们的struts.xml,注意extends=”json-default”

5.在web.xml文件中陪上struts2

6.接下来是前台的页面，其中包括login.html(登陆的界面)，login.js（javascript代码），index.jsp(登陆成功后返回的界面)

Login.html

Login.js

Index.jsp

评论

发表评论

相关推荐

extjs4 ajax 同步设置

extjs4 bug查询

ExtJS4学习笔记八－－Template的使用(转)

ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器(转)

EXTJS 4 form population with JSON read

ExtJS Tree same parentNode

extjs4 一个很专业demo的博客

ExtJs 4 – XTemplates

extjs4 tree操作

extjs4 打开pdf文件

cannot read property 'flex' of undefined

extjs4 初始化的一个方法

extjs4 tree2

Ext中的get、getDom、getCmp、getBody、getDoc的区别

extjs4 学习博客

extjs4 上传文件

extjs4 struts2 grid 新增、删除、修改

extjs4做的grid，带分页，搜索 (转)

extjs4 tree

ExtJs xtype

最近访客更多访客>>