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的教程>>