61EasyUI 表单 - 创建异步提交表单

简介: 61EasyUI 表单 - 创建异步提交表单

创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form)。表单(form)提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面。我们接收返回数据,并将它显示出来。

image.png

创建表单(Form)

<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
    <form id="ff" action="form1_proc.php" method="post">
        <table>
            <tr>
                <td>Name:</td>
                <td><input name="name" type="text"></input></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input name="email" type="text"></input></td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td><input name="phone" type="text"></input></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit"></input></td>
            </tr>
        </table>
    </form>

改变为 Ajax 表单

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

服务器端代码:

form1_proc.php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";
目录
相关文章
|
存储
65EasyUI 表单 - 过滤下拉数据网格
65EasyUI 表单 - 过滤下拉数据网格
52 0
64EasyUI 表单 - 格式化下拉框
64EasyUI 表单 - 格式化下拉框
37 0
|
JavaScript
63EasyUI 表单 - 创建树形下拉框
63EasyUI 表单 - 创建树形下拉框
74 0
62EasyUI 表单 - 表单验证
62EasyUI 表单 - 表单验证
39 0
|
前端开发 容器
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
51 0
|
JSON 前端开发 JavaScript
EasyUI–表单加载内存/本地/服务端数据
在不使用前端语言JS(jQuery等前端框架本质上也是JS)时,如果我们想往表单里面放入数据,该怎么办?比如从文件中、从数据库查出用户信息显示在表单中。
518 0
EasyUI–表单加载内存/本地/服务端数据
|
前端开发 JavaScript Java
EasyUI–表单 文本框 按钮
本篇重点介绍EasyUI框架下的表单和表单元素使用。
537 0
EasyUI–表单 文本框 按钮
|
JSON 前端开发 数据格式
easyUi load方法重新加载表单的数据
1.表单回显数据的方法   //方法一 function loadLocal(){ $('#ff').form('load',{ name:'myname', email:'mymail@gmail.
1671 0

相关课程

更多