关于网页Ajax表单的优化写法

来源：互联网发布：公司电脑网络限制编辑：程序博客网时间：2024/06/09 23:01

关于网页Ajax表单的优化写法

关于Ajax表单的优化写法：
1.保证html符合W3C标准
2.将html表单数据和提交事件移交给Ajax
3.当Ajax报错表单依然可以提交

HTML部分

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <!-- 表单必须包含action属性和method属性 -->    <form action="***.json" method="get" id="***Form">        <!-- 用于存放用户填写的表单 -->        <input type="text" id="1" name="1" value="数据">        <input type="text" id="2" name="2" value="数据">        <input type="text" id="3" name="3" value="数据">        <!-- 用于存放不在页面显示但要传输到后台的数据 -->        <input type="hidden" value="数据">        <input type="hidden" value="数据">        <!-- 表单提交按钮 -->        <button type="submit"> 提交 </button>    </form></body></html>

W3C验证报告：

W3C验证报告

Ajax部分：

<script>//创建表单提交事件监听$("#Form").submit(function() {    // 序列化表单    var data = $(this).serilizeArray();    // Ajax    $.ajax({        url: this.action,        data: data,        type: this.method,        success: function() {            // 这里对数据做处理        }    });    //阻止原表单模块的提交动作    return false;});</script>

2015年11月3日11:15:53
暂时写到这里，再做补充~ ：-）

jazzysnail’s Blog

Email:jazzysnail@outlook.com

2 0