zepto form表单

向右看齐 2021-07-24 22:41 486阅读 0赞

1、serialize()
            在表单为ajax的post请求中get请求自动获取,将表单元素input、textarea和select属性中的name和value，以及被选中的多选框、单选框
            若选中则value为on,未选中则跳过，所有name和value按照键值对,以url中的参数格式&分割，写成字符串
               1、 button无效
        2、serializeArray()
            同serialize()，不过是将每对name和value存进对象中然后再放进数组里
        3、submit()
            * 为 "submit" 事件绑定一个处理函数，或者触发元素上的 "submit" 事件。
            * 当参数function没有给出时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非阻止默认行为。
            * .submit(function(event){event.preventDefault;...});不阻止会一直提交

代码示例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
    </head>
    <body>
    
    <form>
        <input type="password" name="pw" value="123"/>
        <input type="text" name="val" value="kobe"/>
        <input type="checkbox" checked="checked" name="rember"/>
        <input type="submit" value="按钮" name="anniu"/>
    </form>
    
    <script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    
      $(function(){ 
        //serialize()
        var list = $('form').serialize();
        console.log(list);
        //serializeArray()
        var listArr = $('form').serializeArray();
        console.log(listArr);
        //submit()
        $('form').submit(function(e){ 
            e.preventDefault();
            var data = $(this).serialize();
            console.log(data);
        })
      })
    </script>
    </body>
    </html>