使用Ajax提交表单

使用教程 » 使用Ajax提交表单

本教程将向您展示如何使用easyui提交表单。我们创建一个包含名称、电子邮件和电话字段的示例表单。 通过使用easyui表单插件，我们将表单更改为Ajax表单。表单将所有字段提交给后台服务器， 服务器处理并将一些数据发送回前端页面。我们收到返回的数据并显示出来.

创建表单

<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'); } });

服务器代码

$name = htmlspecialchars($_REQUEST['name']); $email = htmlspecialchars($_REQUEST['email']); $phone = htmlspecialchars($_REQUEST['phone']); $file = $_FILES['file']['name']; 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 实例: