本教程主要展示如何使用easyui提交表单。我们创建一个带有name、email和phone字段的表单,通过使用easyui表单插件来将表单更改为ajax表单。表单提交所有的字段到后台服务器,服务器处理并发送一些数据返回到前端页面。我们接收返回数据并将其显示出来。
创建表单
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的教程>>