- jQuery EasyUI從零開始學
- 施堯
- 1712字
- 2019-12-06 14:09:02
2.7 表單
在本章的開頭部分，我們講到一個表單由三部分組成，即表單標簽、表單域、表單按鈕，并且學習了EasyUI表單域中的部分控件以及各類按鈕的使用方法。在前面的章節中，我們介紹的各類控件大都是用來處理用戶的各類操作，其僅僅屬于客戶端的操作，而一個網站更需要服務器端來處理客戶端的各種操作，表單就是客戶端與服務器端之間交互的一個中介，通過表單我們可以將各類控件的值傳輸到服務器端。本節將先介紹表單的使用方法，隨后將向讀者演示一些實用的程序。
2.7.1 表單的基本使用方法
本節將先帶領讀者學習表單的基本使用方法，接著會通過幾個例子進一步講解表單的使用。
表單的默認配置定義在$.fn.form.defaults中。
1. 創建表單
表單只能通過標記來創建：
01 <form id="ff"> 02 ...表單域內的各類控件以及表單按鈕 03 </form>
2. 表單屬性
表單常用屬性說明見表2.52。
表2.52 表單常用屬性
3. 表單事件
表單常用事件說明見表2.53。
表2.53 表單常用事件說明
4. 表單方法
表單常用方法說明見表2.54。
表2.54 表單常用方法說明
2.7.2 提交表單
通常我們會在控件的標記內定義一個name屬性，在向服務器提交數據時，服務器可以通過該屬性的值來獲取數據，例如：
01 <form id="ff" method="post">
02 <div id="nb" name="nb"></div>
03 <a id="btn" href="#" class="easyui-linkbutton">提交</a>
04 </form>
05 <script>
06 $(function(){
07 $('#nb').numberbox({
08 prefix:'$',
09 });
10 $('#ff').form({
11 url:"form.php",
12 onSubmit: function(){
13 //提交前觸發的事件
14 },
15 success:function(data){
16 //服務器返回數據后觸發
17 }
18 });
19 $("#btn").click(function(){
20 $('#ff').submit();
21 });
22 });
23 </script>
相關的服務器代碼如下：
01 <?php 02 //獲取前端數據 03 $name = $_POST["nb"]; 04 //注意$name的值是存儲值 05 ?>
提示
服務器接收的存儲值，本例中如果用戶輸入數字1時數字框會顯示$1，但是提交到服務器的則是存儲值1。
我們也可以使用表單的submit方法動態提交表單，例如上述代碼等同于：
01 <form id="ff" method="post">
02 <div id="nb" name="nb"></div>
03 <a id="btn" href="#" class="easyui-linkbutton">提交</a>
04 </form>
05 <script>
06 $(function(){
07 $('#nb').numberbox({
08 prefix:'$',
09 });
10 $("#btn").click(function(){
11 $('#ff').form('submit',{
12 url:"form.php",
13 onSubmit: function(){
14 //提交前觸發的事件
15 },
16 success:function(data){
17 //服務器返回數據后觸發
18 alert(data);
19 }
20 });
21 });
22 });
23 </script>
在提交表單的過程中，可以使用queryParams屬性添加一些額外的參數，例如：
queryParams:{param1:'1',param2:'2'},
服務器端獲取這些參數的方法如下：
$param1 = $_POST["param1"];
在提交表單前通常需要檢查組件中的輸入值是否通過驗證，此時只需在onSubmit事件中使用validate方法進行檢查即可，該方法會自動掃描表單內的全部組件，只有所有組件都驗證通過時它才會返回true。例如：
01 onSubmit: function(){
02 if($('#ff').form('validate')){
03 alert('通過驗證');
04 return true;
05 }
06 else{
07 alert('未通過驗證');
08 return false;
09 }
10 }
2.7.3 初始化表單字段
在實際開發中經常會遇到對某些信息進行編輯的情況，例如編輯某人的個人信息等，此時需要先從服務器將用戶數據取出并初始化指定的組件，EasyUI表單提供了數據加載功能，它可以方便地幫助我們完成數據的初始化功能，它支持本地加載數據和從服務器加載數據兩種方式。下面先向讀者展示如何加載本地數據，相關代碼如下：
01 <form id="ff" method="post">
02 <input id="nickname" name="nickname"><br/><br/>
03 <input id="age" name="age"><br/><br/>
04 <input id="birthday" name='birthday'>
05 </form>
06 <script>
07 $(function(){
08 $('#nickname').textbox({
09 label:"姓名",
10 labelWidth:150,
11 width:350
12 });
13 $('#age').numberspinner({
14 label:"年齡",
15 labelWidth:150,
16 width:350
17 });
18 $('#birthday').datebox({
19 label:"出生日期",
20 labelWidth:150,
21 width:350
22 });
23 $("#ff").form('load',{
24 nickname:'張三',
25 age:'18',
26 birthday:'7/3/2000'
27 })
28 });
29 </script>
使用表單的load方法可以加載本地數據，可以發現在它的參數中仍然是使用字段的name屬性進行賦值。最終運行結果如圖2.26所示。
圖2.26 使用本地數據初始化表單
同樣可以使用load方法加載服務器端數據來初始化表單，例如：
$("#ff").form('load','initData.php');
其中服務器端代碼如下：
01 $data = array('nickname'=>'zhangsan',
02 'age'=>'18',
03 'birthday'=>'7/3/2000'
04 );
05 echo json_encode($data);
服務器端的數據結構與本地加載時一致，也是通過字段的name屬性來賦值。
2.7.4 文件上傳
本節將講解如何利用表單上傳文件，先看一個例子：
01 <form id="ff" method="post">
02 <!-- 只接受pdf類型文件 -->
03 <input class="easyui-filebox" name='file' style="width:300px"
04 data-options="accept:'application/pdf'" ><br/><br/>
05 <div id="p" class="easyui-progressbar"
style="width:300px;"></div><br/><br/>
06 <a id="btn" href="#" class="easyui-linkbutton">上傳文件</a>
07 </form>
08 <script>
09 $(function(){
10 $("#ff").form({
11 iframe:false,
12 onProgress:function(percent){
13 $("#p").progressbar("setValue",percent);
14 }
15 });
16 $("#btn").click(function(){
17 $('#ff').form('submit',{
18 url:"server/upload.php",
19 });
20 });
21 });
22 </script>
這個例子里面我們使用了表單的onProgress事件，該事件返回文件上傳過程中的進度，使用該事件先要設置表單的iframe屬性為false。我們使用了一個進度條組件（progressbar），該組件將會動態顯示文件上傳的進度。
提示
讀者也可以使用$.messager.progress()方法顯示默認的進度條、使用$.messager.progress('close')方法關閉默認進度條。不同的是默認進度條并不會根據表單處理的進度實時更新，它會循環地更新進度直到被關閉為止。
服務器端同樣是使用文件框的name來獲取上傳的文件，其代碼如下：
01 // 文件的保存目錄,默認文件會被保存到D盤根目錄下
02 $path = "D://";
03 if (file_exists($path . $_FILES["file"]["name"])) {
04 echo $_FILES["file"]["name"] . " 已存在. ";
05 } else {
06 move_uploaded_file($_FILES["file"]["tmp_name"], $path .
$_FILES["file"]["name"]);
07 }
最終運行結果如圖2.27所示。
圖2.27 文件上傳演示
【本節詳細代碼參見隨書源碼：\源碼\easyui\example\c2\uploadFile.html】
提示
本書僅僅是簡單地向讀者演示服務器端的相關代碼，由于服務器端開發語言較多且相關框架眾多，為減輕讀者的學習成本，在本書中將不重點介紹服務器端的相關代碼。讀者在學習服務器端代碼時只需關注兩點即可：（1）服務器端如何獲取數據；（2）服務器端如何返回數據。在本節中服務器端主要是通過標記的name屬性獲取數據，返回的是一個JSON格式數據。