easyUI 通过ajax的方式提交Form

@author YHC

这个教程向你展示使用easyui提交一个form,我们创建一个示例form和name, email 和phone 字段.通过使用form 插件我们改变form为ajax form,form提交所有

字段到后台服务器,服务器处理和发送一些数据返回到前端页面,我们显示数据和显示出来.

查看 Demo

创建 Form
[html]
<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>

<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 form
[javascript] view plaincopyprint?$('#ff').form({
    success:function(data){
        $.messager.alert('Info', data, 'info');
    }
});

$('#ff').form({
    success:function(data){
        $.messager.alert('Info', data, 'info');
    }
}); 服务器端代码
form1_proc.php

[php] view plaincopyprint?$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];

echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];

echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

作者：yhc13429826359

补充：web前端 , JavaScript ,