jQuery EasyUI使用教程：使用Ajax提交表单

---

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库！查看详情>>>

本教程主要展示如何使用easyui提交表单。我们创建一个带有name、email和phone字段的表单，通过使用easyui表单插件来将表单更改为ajax表单。表单提交所有的字段到后台服务器，服务器处理并发送一些数据返回到前端页面。我们接收返回数据并将其显示出来。

创建表单

<div class="easyui-panel" title="Ajax Form" style="width:300px;padding:10px;">
<form id="ff" action="form1_proc.php" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>Name:</td>
<td><input name="name" class="f1 easyui-textbox"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" class="f1 easyui-textbox"></input></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="phone" class="f1 easyui-textbox"></input></td>
</tr>
<tr>
<td>File:</td>
<td><input name="file" class="f1 easyui-filebox"></input></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></input></td>
</tr>
</table>
</form>
</div>

更改为Ajax表单

$('#ff').form({
success:function(data){
$.messager.alert('Info', data, 'info');
}
});

服务器代码

form1_proc.php

$name = htmlspecialchars($_REQUEST['name']);
$email = htmlspecialchars($_REQUEST['email']);
$phone = htmlspecialchars($_REQUEST['phone']);
$file = $_FILES['file']['name'];

echo &lt&lt&ltINFO
<div style="padding:0 50px">
<p>Name: $name</p>
<p>Email: $email</p>
<p>Phone: $phone</p>
<p>File: $file</p>
</div>
INFO;

下载EasyUI示例：

购买正版授权的朋友可以点击""哦~~~