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

时间 2019-11-11

标签 jquery easyui 使用教程 ajax 提交表单栏目 JQuery 繁體版

原文原文链接

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

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

点击查看示例前端

建立表单

1ajax

2服务器

3并发

4post

5ui

6spa

7插件

<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表单

$('#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 <<<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的教程>>