[extjs] ExtJs4.2 Form 表单提交
基本代码:
<script>
Ext.onReady(function(){ Ext.create('Ext.form.Panel', {
title: '登录',
bodyPadding: 5,
width: 350, // 将会通过 AJAX 请求提交到此URL
url: '${pageContext.request.contextPath}/back/login.do', // 表单域 Fields 将被竖直排列, 占满整个宽度
frame: true,
layout:'auto',
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: '用户名',
name: 'name',
allowBlank: false,
blankText:'用户名不能为空'
},{
fieldLabel: '密码',
inputType:'password',
name: 'pwd',
allowBlank: false,
blankText:'密码不能为空' },{
fieldLabel: '用户类型',
name:'type',
allowBlank: false,
hidden:true, //隐藏组件 默认false
value:1//表单默认值
}
], // 重置 和 保存 按钮.
buttons: [{
text: '重置',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: '保存',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('提示信息', action.result.restMsg);
},
failure: function(form, action) {
Ext.Msg.alert('提示信息', action.result.restMsg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
});
</script>
没有添加字段校验,验证码,密码加密等,只是纯粹的登录功能的实现,具体细节暂时忽略!
login.do 对应的程序:
/**
* 登录
*
* @return
*/
@RequestMapping("/login")
@ResponseBody
public void login(@RequestParam String name,@RequestParam String pwd,@RequestParam int type,Writer writer) {
String valMsg ="";
try {
User user = new User();
user.setUname(name);
user.setPwd(pwd);
user.setUtype(type);
User getUser = userService.queryUser(user);
if(getUser!=null){
valMsg=showResultMsg(true, "登录成功");
//跳转到首页
}else {
valMsg=showResultMsg(false, "用户不存在!");
}
} catch (Exception e) {
e.printStackTrace();
valMsg=showResultMsg(true, "登录失败");
}finally {
try {
writer.write(valMsg);
} catch (IOException e) {
e.printStackTrace();
}
}
}
返回的结果:
{"result":true,"restMsg":"登录成功!"}
[extjs] ExtJs4.2 Form 表单提交的更多相关文章
- EXTJS4.0 form 表单提交 后 回调函数 不响应的问题
在提交表单后,应返回一个 JSON 至少要包含{success:true} 否则,EXT 不知道是否成功,没有响应. {success:true,msg:'成功',Url:'http://www.ba ...
- ExtJS4为form表单必填项添加红色*标识
通常情况下,ExtJS4的form表单必填项在输入状态下会有特殊提示,非输入状态下,显示却和其他项没有任何区别.为使必填项更加容易区分,我们需要根据allowBlank的属性值,为form表单中的必填 ...
- ExtJs如何判断form表单是否被修改过详解
1.Extjs表单提交主要有三种方式: 1, EXT的form表单ajax提交(默认提交方式) 相对单独的ajax提交来说优点在于能省略写参数数组 ,form.getForm().submi ...
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- form表单提交
1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
随机推荐
- c语言double类型数据四舍五入
借助math库的round函数 #include <math.h> double ext_round(double data, int precision) { , precision); ...
- How to Reuse Old PCs for Solr Search Platform?
家裡或公司的舊電腦不夠力? 效能慢到想砸爛它們? 朋友或同事有電腦要丟嗎? 我有一個廢物利用的方法, 我收集了四台舊電腦, 組了一個Fully Distributed Mode的Hadoop Clus ...
- LINQ架构简单描述
写在前面的话:课堂上老师只是简单提了一下LINQ,当时听着老师对它的描述,感觉非常神奇,不用去操作繁琐的SQL语句了,读取数据库的操作居然能向写C#代码一样方便,但是一直没有机会去学习使用它. LIN ...
- xslt循环转换子元素
转换源xml <keywords class="array"> <e type="string">e1</e> <e ...
- ajax 和xmlHttpRequest区别
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
- range() 函数详解 python
使用python的人都知道range()函数很方便,今天再用到他的时候发现了很多以前看到过但是忘记的细节.这里记录一下range(),复习下list的slide,最后分析一个好玩儿的冒泡程序. 这里记 ...
- jquery实现的个人中心导航菜单
之前为大家介绍了一款jquery和css3实现的很酷的菜单导航.这是一款由jquery开发的导航菜单.适合放在门户网站的个人用户中心后台.效果和美观都非常不错.我们先一起看看效果图: 在线预览 源 ...
- C#捕获鼠标消息
在C#中怎样禁用鼠标按键,我们可以通过ImessageFilter接口下的PreFilterMessage方法.Application类的AddMessageFilter方法,RemoveMessag ...
- 接口(interface)那点事
1.接口(interface),在 java中有这个类型哦,这是语法哦. public interface MyInterface { } 语法还是很清晰的哦, 类的关键字是class.而接口改为in ...
- Juint测试
添加"Juint测试"组件: 之后不用写在main方法里面便可以直接测试: