jQuery之表单插件form

通过表单 form 插件,调用 ajaxForm() 方法,实现 ajax 方式向服务器提交表单数据,并通过方法中的 options 对象获取服务器返回数据,调用格式如下:

$(form). ajaxForm ({options})

其中 form 参数表示表单元素名称;options 是一个配置对象,用于在发送 ajax 请求过程,设置发送时的数据和参数。

例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表单插件</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script>
    </head>

    <body>
        <form id="frmV" method="post" action="#">
            <div id="divtest">
                <div class="title">
                    <span class="fl">个人信息页</span> 
                    <span class="fr">
                        <input id="btnSubmit" type="submit" value="提交" />
                    </span>
                </div>
                <div class="content">
                    <span class="fl">用户名:</span><br />
                    <input id="user" name="user" type="text" /><br />
                    <span class="fl">昵称:</span><br />
                    <input id="nick" name="nick" type="text" />
                    <div class="tip"></div>
                </div>
            </div>
        </form>

        <script type="text/javascript">
            $(function () {
                var options = {
                    url: "http://www.imooc.com/data/form_f.php", 
                    target: ".tip"
                }
                $("#frmV").ajaxForm(options);
            });
        </script>
    </body>
</html>

ajaxForm 方式实际上实现原本 form 的功能,同时加强了一些事件的控制,比如有如下的配置项

  • target 返回的结果将放到这个target下
  • url 如果定义了,将覆盖原form的action
  • type get和post两种方式
  • dataType 返回的数据类型,可选:json、xml、script clearForm true,表示成功提交后清除所有表单字段值
  • resetForm true,表示成功提交后重置所有字段 iframe 如果设置,表示将使用iframe方式提交表单
  • beforeSerialize 数据序列化前:function($form,options){}
  • beforeSubmit 提交前:function(arr,$from,options){}
  • success 提交成功后:function(data,statusText){}
  • error 错误:function(data){alert(data.message);}

© 2016 – 2018, 飞向上帝的板砖. 版权所有. 转载请注明出处.

发表评论

电子邮件地址不会被公开。 必填项已用*标注