# 表单提交AjaX
在零云中自带了ajax提交的封装,用来减轻前端开发人员的工作,加快项目进度。
## ajax-post用法
主要由以下几个条件触发
1、form表单结构的dom
2、target-form="表单的一个自定义class,比如注册表单那可以用register-user"
3、form的action地址
4、提交按钮必须有type="submit"属性
5、提交按钮加上ajax-post类
接下来点击按钮会自动触发零云封装的ajax操作
![](/Uploads/manual/image/2018-10-27/5bd4311105dde.png)
如上图红色标记所示,点击登录按钮就会执行ajax提交,而不是传统的页面跳转。
## 示例
```html
<form class="form login-form" action="{:U('User/User/login', '', true, true)}" method="post">
<div class="form-group">
<input type="text" class="form-control input" placeholder="{:L('邮箱/手机号/用户名')}" name="account" autocomplete="off" value="">
</div>
<div class="form-group">
<input type="text" onfocus="this.type='password'" class="form-control input" placeholder="{:L('请输入密码')}" name="password" autocomplete="off" value="">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn btn-block submit ajax-post" disabled="disabled" target-form="login-form">{:L('登录')}</button>
</div>
</form>
```
- 简介
- 环境要求
- 安装系统
- 目录结构
- 常见问题
- 基础知识
- 编辑器
- 前端规范
- 前端框架文档
- Builder教程
- Builder的来历
- ListBuilder使用
- setMetaTitle
- addTopButton
- setSearch
- addSearchItem
- setTabNav
- addTableColumn
- setTableDataList
- setTableDataListKey
- setTableDataPage
- addRightButton
- alterTableData
- setExtraHtml
- setTemplate
- FormBuilder使用
- setMetaTitle
- setTabNav
- setExtraItems
- setPostUrl
- addFormItem
- setFormData
- setExtraHtml
- setAjaxSubmit
- setTemplate
- 扩展FormBuilder
- 模块开发
- 创建模块
- 描述文件
- 模型( M )
- 模版( V )
- 控制器( C )
- API接口
- 核心模块
- 文件上传
- 微信小程序模块
- 注册登陆接口
- 钱包模块
- 统一支付
- Cms模块
- 幻灯片接口
- 文档列表接口
- 文档详情接口
- 发表评论接口
- 评论列表接口
- 收藏的文档接口
- 收藏接口
- 分类列表接口
- IM模块
- 发送消息接口
- 最近聊天列表接口
- 查询新消息接口
- 插件相关
- 短信插件
- 支付插件
- 支付宝支付
- 微信支付
- 站群模块
- 模板开发
- 准备工作
- 目录结构
- 数据调用
- 专题
- 插件开发
- 图片显示
- 获取用户信息
- 判断用户登陆
- 表单提交AjaX
- 文件上传
- 2.0兼容写法
- 模板标签
- 核心模块
- Cms模块
- 栏目分类调用
- Cordova
- 配置跨域支持
- 本地开发调试教程
- 打包成apk和ipa
- 自定义APP信息
- 常见问题
- 申请Apple开发者账户
- 多主题开发
- 新建主题
- 目录结构
- 模板变量
- 定制安装部署