jQuery EasyUI 表单 – 创建异步提交表单（Ajax 提交）
jQuery EasyUI 提供了 form 插件 和 validatebox 等组件，支持表单验证和异步（Ajax）提交。最常用的异步提交方式有两种：
- 使用
form插件的ajax选项（推荐，简单） - 使用
submit方法结合onSubmit和手动 $.ajax
下面提供完整示例，包括表单验证、加载动画、成功/失败提示。
示例1：最简单异步提交（推荐）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI 异步提交表单</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>EasyUI 异步提交表单示例</h2>
<div style="padding:20px;">
<form id="ff" class="easyui-form" method="post"
data-options="novalidate:true">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="name" style="width:100%"
data-options="label:'姓名:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="email" style="width:100%"
data-options="label:'Email:',required:true,validType:'email'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="subject" style="width:100%"
data-options="label:'主题:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="message" style="width:100%;height:100px"
data-options="label:'内容:',multiline:true,required:true">
</div>
<div style="text-align:center;padding:10px">
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick="submitForm()">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick="clearForm()">重置</a>
</div>
</form>
</div>
<script type="text/javascript">
function submitForm(){
$('#ff').form('submit', {
url: 'form_submit.php', // 服务器处理脚本
ajax: true, // 启用异步提交（关键）
onSubmit: function(){
// 提交前进行表单验证
var isValid = $(this).form('validate');
if (!isValid){
$.messager.alert('提示','请填写完整信息！');
}
return isValid; // 返回 false 将阻止提交
},
success: function(data){
var data = eval('(' + data + ')'); // 解析 JSON
if (data.success){
$.messager.alert('成功', data.message, 'info');
$('#ff').form('clear');
} else {
$.messager.alert('错误', data.message, 'error');
}
}
});
}
function clearForm(){
$('#ff').form('clear');
}
</script>
</body>
</html>示例2：更完整的版本（带加载遮罩）
function submitForm(){
$('#ff').form('submit', {
url: 'form_submit.php',
ajax: true,
onSubmit: function(param){
var isValid = $(this).form('validate');
if (isValid){
$.messager.progress({ // 显示进度条
title: '请稍等',
msg: '正在提交数据...'
});
}
return isValid;
},
success: function(data){
$.messager.progress('close'); // 关闭进度条
try {
var result = $.parseJSON(data);
if (result.success){
$.messager.alert('成功', result.message || '提交成功！', 'info');
$('#ff').form('clear');
} else {
$.messager.alert('失败', result.message || '提交失败！', 'error');
}
} catch(e) {
$.messager.alert('错误', '服务器返回格式错误', 'error');
}
},
error: function(){
$.messager.progress('close');
$.messager.alert('错误', '网络请求失败！', 'error');
}
});
}服务器端示例（form_submit.php）
<?php
sleep(1); // 模拟处理延迟
// 获取表单数据
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$subject = $_POST['subject'] ?? '';
$message = $_POST['message'] ?? '';
if (empty($name) || empty($email) || empty($subject) || empty($message)) {
echo json_encode(['success' => false, 'message' => '数据不完整']);
exit;
}
// 这里进行实际处理（如保存到数据库）
echo json_encode([
'success' => true,
'message' => '表单提交成功！姓名：' . $name
]);
?>关键属性说明
ajax: true：启用异步提交（EasyUI 1.5+ 支持）onSubmit：提交前调用，返回false可阻止提交，常用于验证success：服务器返回数据后的回调（注意：返回字符串，需要手动eval或parseJSON）validate：使用 EasyUI 的内置验证规则（如required,email等）
官方参考
- Form 插件文档：https://www.jeasyui.com/documentation/form.php
- Ajax Form Demo：https://www.jeasyui.com/demo/main/index.php?plugin=Form&theme=default&dir=ltr&pitem=Ajax%20Submit
如果需要结合 dialog 窗口提交、文件上传（easyui-filebox）、或复杂验证规则，请告诉我！
