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

本教程主要展現如何使用easyui提交表單。咱們建立一個帶有name、email和phone字段的表單，經過使用easyui表單插件來將表單更改成ajax表單。表單提交全部的字段到後臺服務器，服務器處理併發送一些數據返回到前端頁面。咱們接收返回數據並將其顯示出來。

jQuery EasyUI最新試用版下載請猛戳>>

點擊查看示例

建立表單

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<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> <tbody><tr> <td>Name:</td> <td><input name="name" class="f1 easyui-textbox"></td> </tr> <tr> <td>Email:</td> <td><input name="email" class="f1 easyui-textbox"></td> </tr> <tr> <td>Phone:</td> <td><input name="phone" class="f1 easyui-textbox"></td> </tr> <tr> <td>File:</td> <td><input name="file" class="f1 easyui-filebox"></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit"></td> </tr> </tbody></table> </form> </div>

更改成Ajax表單

1 2 3 4 5

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

服務器代碼

form1_proc.php

1 2 3 4

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

1 2 3 4 5 6 7 8

echo <<<INFO <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

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的教程>>