jQuery EasyUI使用教程：使用Ajax提交表单

本教程主要展示如何使用easyui提交表单。我们创建一个带有name、email和phone字段的表单，通过使用easyui表单插件来将表单更改为ajax表单。

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库！查看详情>>>

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

jQuery EasyUI最新试用版下载请猛戳>>

创建表单

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

更改为Ajax表单

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

服务器代码

form1_proc.php

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

echo &lt&lt&ltINFO<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

购买正版授权的朋友可以点击”咨询在线客服”哦~~~