jQuery异步提交form表单

使用jquery.form.js官网现在地址表单插件来实现异步form表单提交。

先看看官方的介绍:

/*
    Usage Note:
    -----------
    Do not use both ajaxSubmit and ajaxForm on the same form.  These
    functions are mutually exclusive.  Use ajaxSubmit if you want
    to bind your own submit handler to the form.  For example,

    $(document).ready(function() {
        $(‘#myForm‘).on(‘submit‘, function(e) {
            e.preventDefault(); // <-- important
            $(this).ajaxSubmit({
                target: ‘#output‘
            });
        });
    });

    Use ajaxForm when you want the plugin to manage all the event binding
    for you.  For example,

    $(document).ready(function() {
        $(‘#myForm‘).ajaxForm({
            target: ‘#output‘
        });
    });

    You can also use ajaxForm with delegation (requires jQuery v1.7+), so the
    form does not have to exist when you invoke ajaxForm:

    $(‘#myForm‘).ajaxForm({
        delegation: true,
        target: ‘#output‘
    });

    When using ajaxForm, the ajaxSubmit function will be invoked for you
    at the appropriate time.
*/

实际使用中的方式:

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnAjaxSubmit").click(function () {
            var options = {
                url: ‘action.url‘,
                type: ‘post‘,
                dataType: ‘text‘,
                data: $("#form").serialize(),  //序列化
                success: function (data) {    //提交成功之后的回调函数
                    if (data.length > 0){
                        $("#responseText").text(data);
            }
                }
            };
            // ajaxForm
            $("#form").ajaxForm(options);
 
            // ajaxSubmit
            $("#form").ajaxSubmit(options);
        });
    });
</script>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。