easyUI 通过ajax的方式提交Form

@author YHC

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

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

 查看   Demo

创建 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

$('#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";  

下载  EasyUI 示例代码:

easyui-form-demo.zip