关于jQuery Form Plugin使用心得

吐槽一下先

好久没开发了，今天遇到一个客户form提交的问题，想把form提交从同步变成ajax的异步方式，在网页接受返回来的数据，使用的是jquery from插件，于是网上搜了一圈，博客园，csdn，发现几乎99%全都是错的，剩下的1%排版也有问题，很不好看，浪费了大量的时间，然后去官方看文档十分钟就解决了，真是伤不起。现在国内的博客都是粘贴复制就成一篇文章，这个现象csdn最严重，博客园还好些，有点原创的东西，大牛也多。

开始正文

这个插件的使用方法呢根本不是像网上很多博客说的如下所示的使用方法

  $('#myForm02').ajaxForm(function (sesponseTest) {
            //$("#comment").val(sesponseTest);
            alert("Thank you for your comment!" + sesponseTest);
        });

而是像我下图这样的使用方法

   $(document).ready(function () {
        var picString = "";
        var options = {
            target: '#output2',   // target element(s) to be updated with server response
            success: function () {
                alert("success");
            }// post-submit callback

            // other available options:
            //url:       url         // override for form's 'action' attribute
            //type:      type        // 'get' or 'post', override for form's 'method' attribute
            //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
            //clearForm: true        // clear all form fields after successful submit
            //resetForm: true        // reset the form after successful submit

            // $.ajax options can be used here too, for example:
            //timeout:   3000
        };
        $('#myForm02').submit(function () {
            $(this).ajaxSubmit(options);
            return false; //阻止表单默认提交
        });

需要先定义一个options参数，然后根据自己的情况给options参数的各属性赋值，然后再调用，我这边使用的是ajaxsubmit方法，ajaxform使用也是这样的。

关于ajaxForm 和ajaxSubmit的区别

ajaxform是被动的提交，而ajaxsubmit是主动的提交，这样说起来可能有点难于理解，简单来说其实就是ajaxform就等于下图的这种调用方式

$('#myForm02').submit(function () {
            $(this).ajaxSubmit(options);
            return false; //阻止表单默认提交
        });

tips

使用这个插件要注意jquery的版本要是1.7才可以，我尝试的时候使用3.3.1是会报错的。

最后附上jquery form的官网，大家如果还有疑问的话，可以直接去那上面看看 http://malsup.com/jquery/form/