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

---

Kendo UI for jQuery——創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫！查看詳情>>>

本教程主要展示如何使用easyui提交表單。我們創(chuàng)建一個帶有name、email和phone字段的表單，通過使用easyui表單插件來將表單更改為ajax表單。表單提交所有的字段到后臺服務(wù)器，服務(wù)器處理并發(fā)送一些數(shù)據(jù)返回到前端頁面。我們接收返回數(shù)據(jù)并將其顯示出來。

創(chuàng)建表單

<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');
}
});

服務(wù)器代碼

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示例：easyui-form-demo.zip

購買正版授權(quán)的朋友可以點擊"咨詢在線客服"哦~~~