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示例：

購買正版授權的朋友可以點擊""哦~~~