jquery - 将 jquery.submit 转换为 ajax 提交

Question

我似乎不知道如何使用 Ajax 从 jquery ui 按钮功能提交表单。

这是我通过传统方式提交表单的脚本

        $('#contact-form').dialog({
            modal: true,
            autoOpen: false,
            buttons: {
                Cancel: function () {
                    $(this).dialog('close');
                },
                Ok: function () {
                    $('form#contactUs').submit();
                    $(this).dialog('destroy');
                }
            }
        });

        $('#contact-us').click(function () {
            $('#contact-form').dialog('open');
            return false;
        });
    });

这是我的表格

<div id="contact-form" class="hidden" title="Online Request Form">
    <form action="/Main/Contact/contactUs" method="post">            
        <div>
            <label for="Name">Name</label><br />
            <input name="Name" /><br />
            <label for="PhoneNumber">Phone Number</label><br />
            <input name="PhoneNumber" /><br />
            <label for="EmailAddress">Email Address</label><br />
            <input name="EmailAddress" /><br />
            <label for="Question">Question or Comment</label><br />
            <textarea name="Question"></textarea><br />
            <label for="Security">What color is an orange?</label><br />
            <input name="Security" />
            <noscript>
                <input type="submit" name="submit" value="Ok" />
            </noscript>
        </div>
    </form>    
</div>

如何更改此设置以通过 Ajax 提交链接，以便显示成功消息？

Answer 1

这可能就足够了:

$("#contact-form form").submit(function(e) {
    e.preventDefault();
    $.post( $(this).attr('action'), $(this).serialize(), 
                function(resp) {
                    if(resp == "success") {
                        alert('Submission was successful');
                    } else {
                        // something else
                    }
                }
    });              
});

简要说明:

• 将 onsubmit 事件处理程序绑定(bind)到联系表单。阻止“正常”提交。
• 序列化表单，并将结果发送到表单的操作。
• 评估响应，并以某种方式显示一条消息。

进一步阅读:

• http://docs.jquery.com/Post
• http://api.jquery.com/category/events/event-object/
• http://api.jquery.com/serialize/