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格式数据。