EXT提交表单

2277259257

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

最近访客更多访客>>

zhaoshijie

juegege

waterfire119

damager2012

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

数据传递

EXT的form表单ajax提交（默认提交方式）相对单独的ajax提交来说优点在于能省略写参数数组将按钮添加单击事件表单验证登陆

------------------------------------------------------------------------

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

<html>

<head>

<title>New Document</title>

</head>

<body>

Ext.onReady(function(){

//编码方式

Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';

//使用表单提示

Ext.QuickTips.init();

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

//定义表单

var simple = new Ext.FormPanel({

labelWidth: 75,

baseCls: 'x-plain',

defaults: {width: 150},

defaultType: 'textfield',//默认字段类型

//定义表单元素

items: [{

fieldLabel: '帐户',

name: 'name',//元素名称

//anchor:'95%',//也可用此定义自适应宽度

allowBlank:false,//不允许为空

blankText:'帐户不能为空'//错误提示内容

},{

inputType:'password',

fieldLabel: '密码',

//anchor:'95%',

name: 'pws',

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.do', //文件路径

method:'post',//提交方法post或get

params:'', //提交成功的回调函数

success:function(form,action){

if (action.result.msg=='ok') {

document.location='index.html';

} else {

Ext.Msg.alert('登陆错误',action.result.msg);

}

//提交失败的回调函数

failure:function(){

Ext.Msg.alert('错误','请稍后再试！');

}

});

}

},{

text: '取消',

handler:function(){simple.form.reset();}//重置表单

}]

});

//定义窗体

win = new Ext.Window({

id:'win',

title:'用户登陆',

layout:'fit', //之前提到的布局方式fit，自适应布局

width:300,

height:150,

plain:true,

bodyStyle:'padding:5px;',

maximizable:false,//禁止最大化

closeAction:'close',

closable:false,//禁止关闭

collapsible:true,//可折叠

plain: true,

buttonAlign:'center',

items:simple//将表单作为窗体元素嵌套布局

});

win.show();//显示窗体

});

</script>

</body>

</html>

------------------------------------------------------------------------

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request,

HttpServletResponse response) {

// 初始化编码方式和输出流

response.setContentType("text/json; charset=utf-8");

PrintWriter out = null;

try {

out = response.getWriter();

} catch (IOException e) {

e.printStackTrace();

}

// 得到页面传过来的参数

String username = request.getParameter("name");

String password = request.getParameter("pws");

System.out.println("用户名：" + username);

System.out.println("密码：" + password);

// 请求判断

String msg = null;

if (username.trim().equals("admin") && password.trim().equals("123")) {

msg = "ok";

} else {

msg = "你的帐户或密码错误";

}

// 初始化

Map map = new HashMap();

map.put("success", true);

map.put("msg", msg);

// 转换成对象，不要转换成数组

JSONObject obj = JSONObject.fromObject(map);

// System.out.println(obj);

// 输出到列表

out.print(obj);

return null;

}

分享到：

EXT系列学习 | jQuery提交表单

2014-03-06 23:00
浏览 1221
评论(2)
分类:Web前端
查看更多

2 楼 wx819648354 2014-04-15

然后这是jsp的代码，谢谢
var userEm = new Ext.form.TextField({
name:"username",
fieldLabel:"用户名",
selectOnFocus:true, //得到焦点时自动选择文本
allowBlank:false,
blankText:"用户名不能为空",
regex:/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,//用户名输入格式
    regexText:"用户名格式错误"
});
var userPs = new Ext.form.TextField({
name:"userpass",
inputType:"password",
fieldLabel:"密码",
allowBlank:false,
blankText:"密码不能为空",
maxLength:12,
minLength:6
});
Ext.onReady(
function (){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
frame:true,
labelAlign:"right",
//bodyStyle
defaultType:"textfield",
defaults:{width:150},
items:[userEm,userPs],
keys:[{
key:Ext.EventObject.ENTER,
fn:save,
scope:this
}],
buttons:[{
text:"登录",
      type:'submit',
      handler:function save(){
      var userName = userEm.getValue();
      var userPas = userPs.getValue();
      if(form.form.isValid()){
      form.form.submit({
      waitTitle:"提示",
      waitMsg:"正在进行登录验证，请稍后...",
      url:'LoginServlet',
      method:'post',
params:{
userName : userName,
userPas : userPas
},
      success:function(form,action){
      if(action.result.waitMsg=="ok"){

      document.location='main.jsp';
      }else{
      Ext.Msg.alert('登录失败',action.result.waitMsg);
      }
      },

          failure : function(form, action) {
                            switch (action.failureType) {
                            case Ext.form.Action.CLIENT_INVALID:
                                Ext.Msg.alert('错误提示', '表单数据非法请核实后重新输入！');
                                break;
                            case Ext.form.Action.CONNECT_FAILURE:
                                Ext.Msg.alert('错误提示', '网络连接异常！');
                                break;
                            case Ext.form.Action.SERVER_INVALID:
                               Ext.Msg.alert('错误提示', "您的输入用户信息有误，请核实后重新输入！");
                               form.form.reset();
                            }
                        }
      });
      }
      }
    }]
});
//使窗口弹出来
var formWindow = new Ext.Window({

width:400,
height:200,
title:"用户登录",
collapsible:true,
plain: true,
items:form,
//cls :'alpha',
layout:"fit",//布局
closable:false,//使窗口右上角的叉叉消失
draggable:false,//使窗口不能被拖动
bodyStyle:'padding:20px;background-color:00CCFF',
resizable:false //使窗口不能被拉伸
});
formWindow.show();//实现窗口显现
});

1 楼 wx819648354 2014-04-15

这是servlet的方法，但是一直提交不过去，能帮我看下么
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

request.setCharacterEncoding("utf-8");
String username = request.getParameter("userName");
String userpass = request.getParameter("userPas");
System.out.println(username+" "+userpass);

String msg=null;
if(username.trim().equals("819648354@qq.com")){
JSONObject jsonObject = new JSONObject();
response.getWriter().write(jsonObject.toString());
response.getWriter().flush();
msg="ok";
}else{
msg="登录失败";
}

}

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论