Jquery - 表单异步提交

使用方法

引入 JQuery.Form.js

1. 

<form id="MyForm" name="MyForm" action="/Controller/Action" method="post">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>姓名</td>
                <td><input name="Name" type="text" required="required" /></td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td><input name="IDCard" type="text" required="required" pattern="^(\d{15}|\d{17}[\dx])$" /></td>
            </tr>
        <input type="submit" value="保存" />
</form>

$(function () {
    $("#Borrower").submit(function () {
        $(this).ajaxSubmit({
            success: function (result) {
            }
        });
        return false;
    });
})

2.

<form id="MyForm" name="MyForm" action="/Controller/Action" method="post">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>姓名</td>
                <td><input name="Name" type="text" required="required" /></td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td><input name="IDCard" type="text" required="required" pattern="^(\d{15}|\d{17}[\dx])$" /></td>
            </tr>
        <input type="submit" value="保存" />
</form>

$(function () {
    $("#Borrower").ajaxForm({
            success: function (result) {}
        });
})

 

 

可能出现的问题:

如果一个表单存在两个指向不同 url 的 submit 按钮, 则会出现问题

<form>
    <input type="submit" value="A" formaction="/A/a" />
    <input type="submit" value="B" formaction="/B/b" />
<form>

解决方案:

使用按钮, 配合 ajaxSubmit 来灵活的选择需要提交的 url

$(function () {
    $("#A").click(function () {
        $("#form").ajaxSubmit({
            type: 'post',
            url: '/A/a',
            success: function (result) {
                alert(result);
            }
        });
    })

    $("#B").click(function () {
        $("#form").ajaxSubmit({
            type: 'post',
            url: '/B/b',
            success: function (result) {
                alert(result);
            }
        });
    })
})