本文详细介绍了EasyUI框架中表单的AJAX提交方式，包括如何创建基本的HTML表单，设置提交URL，使用onSubmit和success回调函数处理提交过程。还展示了如何在提交前验证表单、处理响应数据以及加载、清除和重置表单数据的方法。此外，文中提及了EasyUI Form表单提交的一些常见问题和注意事项。
转自：https://www.cnblogs.com/net5x/articles/4576926.html
Form(表单)
使用$.fn.form.defaults重写默认值对象
form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
用法
创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。
Name:
Email:
...
使普通表单成为ajax提交方式的表单。
$('#ff').form({
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
// submit the form
$('#ff').submit();
做一个提交操作。
// call 'submit' method of form plugin to submit the form
$('#ff').form('submit', {
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
提交额外的参数。
$('#ff').form('submit', {
url:...,
onSubmit: function(param){
param.p1 = 'value1';
param.p2 = 'value2';
}
});
处理提交响应
提交一个ajax表单是非常简单的。用户可以在提交完成后获取响应数据。注意，响应的数据是来自服务器的原始数据。A parse action to the response data is required to get the correct data.
例如，响应数据假设为JSON，一个典型的响应数据格式如下：
{
"success": true,
"message": "Message sent successfully."
}
现在在'success'回调函数中处理JSON字符串。
$('#ff').form('submit', {
success: function(data){
var data = eval('(' + data + ')'); // change the JSON string to javascript object
if (data.success){
alert(data.message)
}
}
});
属性
属性名
属性值类型
描述
默认值
url
string
提交表单动作的URL地址
null
事件
事件名
参数
描述
onSubmit
param
在提交之前触发，返回false可以终止提交。
success
data
在表单提交成功以后触发。
onBeforeLoad
param
在请求加载数据之前触发。返回false可以停止该动作。
onLoadSuccess
data
在表单数据加载完成后触发。
onLoadError
none
在表单数据加载出现错误的时候触发。
方法
方法名
参数
描述
submit
options
执行提交操作，该选项的参数是一个对象，它包含以下属性：
url：请求的URL地址。
onSubmit: 提交之前的回调函数。
success: 提交成功后的回调函数。
下面的例子演示了如何提交一个有效并且避免重复提交的表单。
$.messager.progress();// 显示进度条
$('#ff').form('submit', {
url: ...,
onSubmit: function(){
var isValid = $(this).form('validate');
if (!isValid){
$.messager.progress('close');// 如果表单是无效的则隐藏进度条
}
return isValid;// 返回false终止表单提交
},
success: function(){
$.messager.progress('close');// 如果提交成功则隐藏进度条
}
});
load
data
读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录。
代码示例：
$('#ff').form('load','get_data.php');// 读取表单的URL
$('#ff').form('load',{
name:'name2',
email:'mymail@gmail.com',
subject:'subject2',
message:'message2',
language:5
});
clear
none
清除表单数据。
reset
none
重置表单数据。(该方法自1.3.2版开始可用)
validate
none
做表单字段验证，当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件。
enableValidation
none
启用验证。(该方法自1.3.4版开始可用)
disableValidation
none
禁用验证。(该方法自1.3.4版开始可用)
easyui form表单提交应注意的问题
今天在一个项目中用到表单提交,代码如下: $('#CreateForm').form('submit', { onSubmit: function () { ajaxCreateFrom(this, ...
easyui form表单提交标准格式
$("#temForm").form('submit', { url: '', queryParams: {}, cache: false, type: 'POST', dataT ...
Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮()就可以进行数据的提交, ...
thinkphp处理jQuery EasyUI form表单问题
jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提 ...
表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树
EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...
Jquery form表单提交
起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器 ...
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
随机推荐
51nod水题记
妈呀51nod已经刷不动了又开始跟bzoj一样总是得看题解了...那么发一下总结吧... 1051:最大子矩阵 #include #include
Zabbix的LLD功能--Low-level discovery
感觉这个主题是和一个主题是一个系列,而且更基础. 准备深入研究一下... 相关文档准备: https://www.zabbix.com/documentation/2.0/manual/discove ...
使用简单的 5 个步骤设置 Web 服务器集群
通过在多个处理器之间分担工作负载并采用多种软件恢复技术,能够提供高度可用的环境并提高环境的总体 RAS(可靠性.可用性和可服务性).可以得到的好处包括:更快地从意外中断中恢复运行,以及将意外中断对终端 ...
BZOJ1192 [HNOI2006]鬼谷子的钱袋 数学推理
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1192 题意概括 把一个数m拆成很多数字. 问至少拆成多少个数字,1~m中的所有数字才可以用这些数字 ...
[WebGL入门]十八，利用索引缓存来画图
注:文章译自http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］.另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...
[翻译]第一天 - 在 Windows 下安装和运行 .NET Core
原文: http://michaelcrump.net/getting-started-with-aspnetcore/ 免责声明:我不是 .NET Core 开发团队的一员,并且使用的是公开.可用的 ...
[QT] 小知识集锦
qt 中关于 QWidget 的背景颜色和背景图片的设置 首先设置autoFillBackground 属性为真 然后定义一个QPalette 对象 设置QPalette 对象的背景属性(颜色或图片) ...
升级struts到2.5.2遇到的问题及解决方案
原来的版本是2.3.x,由于安全原因需要升级到2.5.2.1,2.5.2版本不再提供xwork.jar ,整合到了 struts-core包中. 2,方法不能访问的问题,需要在每个action配置文件 ...
HDU 2485 Destroying the bus stations(!最大流∩!费用流∩搜索)
Description Gabiluso is one of the greatest spies in his country. Now he’s trying to complete an “im ...
扫一扫
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
