EXT Form表单AJAX提交示例-CSDN博客

本文链接：https://blog.csdn.net/iteye_8039/article/details/82571496

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提交表单