EXT的form表单ajax提交（默认提交方式） 相对单独的ajax提交来说优点在于能省略写参数数组 将按钮添加单击事件 表单验证登陆
------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="lib/ext/ext-all.js"> </script>
</head>
<body>
<script>
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提交表单与ASP.NET的结合时，主要涉及的是EXTJS如何与ASP.NET后端进行数据交互。EXTJS 提供了表单组件（FormPanel）来创建和处理用户输入，而ASP.NET则处理这些数据并进行业务逻辑处理或数据持久化。 ...
在现代Web应用开发中，异步提交表单是一种常见的技术手段，它能够提升用户体验，减少页面刷新带来的数据丢失风险，并能有效提高系统的响应速度。EXT框架（通常指的是Ext JS）作为一种成熟且功能丰富的JavaScript库，...
### ext_表单提交_数据校验：深入解析与实践 #### 一、文本框输入控件（Ext.form.TextField） 在Ext JS框架中，`Ext.form.TextField`是一种用于收集用户输入的基本控件，它提供了丰富的配置选项来实现数据校验。...
当用户填写并提交表单时，框架会自动执行这些验证。如果所有验证都通过，表单数据会被序列化为JSON格式，并通过`Ext.Ajax.request`方法发送到服务器。你可以自定义请求参数，如URL、方法（GET或POST）、额外的请求...
以下是EXT提交服务器的三种方式的详细说明： 1. **EXT的Form表单AJAX提交**：这是EXT中最常见的提交方式，它允许你在不刷新整个页面的情况下与服务器进行异步通信。通过使用`doAction`方法，你可以方便地触发表单的...
EXT表单还支持异步提交，即通过Ajax技术将表单数据无刷新地发送到服务器。这通常涉及使用Action对象和FormPanel的submit方法。开发者可以自定义提交过程，处理服务器返回的结果，比如显示错误消息或处理成功后的后续...
Ext Form提供了一种结构化的方式来组织这些字段，并提供了验证、提交和数据绑定等功能。 动态加载表单数据涉及到的主要知识点包括： 1. **JSON数据格式**：JSON（JavaScript Object Notation）是一种轻量级的数据...
使用`Ext.form.Basic`和`Ext.form.Panel`，可以轻松实现数据的提交和验证。 2. **EXT4.3动态grid**： - **动态列**：EXT4.3的`Ext.grid.Panel`允许在运行时动态添加、删除和调整列宽。开发者可以通过`columns`配置...
6. **数据绑定**：表单字段可以与后台数据源绑定，实现动态数据加载和提交，这在大数据应用和CRUD操作中尤为常见。 7. **表单验证**：内置的验证机制确保用户输入的数据符合预定规则，提高了数据的准确性和一致性。...
在上述代码的`load`和`submit`方法中，表单数据的加载和提交通过URL与服务器进行交互，`waitMsg`提供了加载提示，`success`和`failure`回调处理操作结果。 总结来说，EXT表单FormPanel和表格GridPanel是EXT JS中...
Ext.Msg.alert('失败', '表单提交失败: ' + action.result.message); } }); } else { Ext.Msg.alert('警告', '请检查表单数据!'); } } }] }); ``` 在这个例子中，当用户点击提交按钮时，会触发`handler`...
在使用Ext Ajax提交表单前，通常需要先将表单数据序列化为JSON或URL编码格式。ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例，然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 ...
本示例着重介绍如何使用Ext JS框架中的Ajax组件来实现异步提交表单，以及如何处理success和failure回调。 首先，Ext JS是一个强大的JavaScript库，用于构建富客户端应用程序。它提供了丰富的组件模型和数据绑定机制...
简单的Ext应用实例，包括表单，与后台交互，基本组件等的使用。对于Ext初学者来说挺实用的，适用于Ext 3.0版本
最后，如果一切正常，则提交表单数据到服务器端指定的URL，并处理成功或失败的回调。 综上所述，这个实例展示了如何在Ext中创建一个完整的表单，包括表单的布局、字段的定义及验证、按钮及事件处理等多个方面。对于...
// 提交表单逻辑 } }] }); } }); ``` 当用户点击提交按钮时，我们需要捕获这个事件并执行验证。在上面的代码中，我们在按钮的`handler`属性中添加了一个回调函数。在实际的项目中，我们会在这里实现表单数据的...
例如，当用户更改字段值时触发特定操作，或在提交表单前进行额外的验证。 7. **表单提交（Form Submission）**：表单可以以两种方式提交：异步（Ajax）或同步（传统的HTTP请求）。异步提交在后台处理数据，不会刷新...
表单支持多种验证策略，如服务器端验证、客户端验证，以及在提交前验证整个表单。Grid表单将表格和表单功能相结合，使得用户可以在同一视图下查看和编辑数据，极大地提高了工作效率。 除了上述控件，Ext JS还提供了...
// 提交表单并处理数据 } }] }] }); } }); ``` 在这个代码段中，我们创建了一个名为`RegistrationApp`的应用，并在其`launch`方法中定义了一个全屏布局的表单。表单包含了三个字段：一个文本字段（username）...
用户提交表单数据后，这些数据会被发送到服务器，服务器端脚本处理数据并更新数据库，然后返回响应，更新前端界面。 总结来说，这个示例涵盖了Ext JS表单设计、XML数据绑定、GridPanel组件使用以及可能的数据库交互...