[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提交文件, 为了 ...
随机推荐
- ny71 独木舟的旅行
独木舟上的旅行时间限制:3000 ms | 内存限制:65535 KB难度:2描述进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客的总重量不能 ...
- python2 UnicodeDecodeError: 'ascii' codec can't decode byte 0xce in position 7: ordinal not in range(128)
python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错UnicodeDecodeError: 'ascii' codec can't deco ...
- 关于一个页面的tab切换整体页面刷新而tab标签处是同一个文件怎么做焦点的问题
解决方法,不能直接写点击效果就要在超链接中加一个参数,根据参数的值去给变焦点的效果,实现方法如下: <div class="vip_search"> ...
- 刷新页面要通过F5
而不是选中地址栏再按enter键,这样可能产生两种问题: 1.地址栏中的URL可能包括你上次提交的参数,你按了enter之后可能导致上次提交的参数重复提交 2.可能导致根本就没有刷新页面,刚才我修改了 ...
- eclipse egit 报错 The current branch is not configured for pull No value for key branch.master
eclipse egit 插件 pull报错 The current branch is not configured for pull No value for key branch.master ...
- 成果展示-RSA算法工具
- HTML5的video虽然可用controls来展示控件
HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制.下面是一个小例子. 当 ...
- javascript 常用对象
<!doctype html> <head> <script type="text/javascript"> /* ps:需要注意的是部分的方法 ...
- 【WPF/C#】测试下载文件(图片)
需求:界面上有一个按钮,点击后联网下载一张PNG图片,保存到本地指定路径. 重要参考: http://stackoverflow.com/questions/24797485/how-to-downl ...
- git 远程仓库版本的回退以及git reset 几种常用方式记录
由于 github push 了两个比较潦草的commit, 自己很不满意,又不想重新开vpn进行上传,所以找了一下相关的教程. 最后研究了一下,原理为先在本地还原到你想要的commit,然后强制pu ...