時間真快，轉眼一個月快結束了，一個月沒寫部落格了！手開始生了，怎麼開始呢……

抓住6月份的尾巴，今天的主題是

通過該外掛，我們可以非常簡單的實現表單的非同步提交，並實現檔案上傳、進度條顯示等等。

現在我們從一個ASP.NET同步表單提交開始，然後再將其轉化為非同步的表單提交。我寫了3種表單提交示例，並簡單分析了各種方式的利弊。

當然主題還是使用jQuery表單外掛輕鬆實現表單非同步提交以及分析下該外掛的原始碼。

ASP.NET伺服器端控制元件實現同步表單提交

ASP.NET伺服器控制元件最大特徵就是標籤包含ID和runat=”server”屬性，在客服端頁面內容中會輸出類似

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGR/8ZxOm5Tn0sfHNJaqE12hKqqJTQ==">標籤，用於儲存控制元件值資料。如下：

    <form runat="server" id="server_form" method=”post”>
        <table border="1">
            <tr>
                <td>使用者名稱：</td>
                <td>
                    <asp:TextBox ID="txtLoginName" runat="server" AutoPostBack=”true” ></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                   <asp:Button ID="btnSubmit" runat="server" Text="伺服器控制元件同步提交模式" />
                   <asp:Button ID="btnUnSubmit" runat="server" OnClientClick="return false;" Text="不提交表單" /> 
                </td>
            </tr>
        </table>
    </form>
    <asp:Label ID="labResponse" runat="server"></asp:Label>

我們用ASP.NET伺服器控制元件構建了一個表單，在ASP.NET頁面中有這樣限定：

1)一頁只能有一個伺服器端 Form 標記，其他伺服器端控制元件都在該表單中。

2)頁面中伺服器端Form中任何導致頁面回發的伺服器端控制元件事件都會觸發表單提交事件submit。比如：

a)單擊沒有在OnClientClick事件中return false的伺服器端按鈕控制元件

b)將AutoPostBack屬性設定為true的TextBox、RadioButton、CheckBox、DropDownList等伺服器端控制元件的值改動時都會觸發頁面回發。

c)另外：type=”submit”的客服端標籤

<input type=”submit” />導致表單提交

此方案優勢：

1)我們在後臺可以非常輕易的獲取伺服器端控制元件的值，比如使用this. txtLoginName.Text訪問控制元件的值或根據表單提交方式在this.Context.Request中獲取表單元素值。

2)我們在後臺可以輕鬆設定頁面伺服器端控制元件的值，比如使用this. labResponse.Text = “表單提交成功”。

此方案劣勢：

劣勢很明顯，效率低下，每一次導致的頁面回發都會觸發完整的ASP.NET頁面生命週期，造成出現“白頁”的情況。（更多描述請看：）

        

jQuery非同步提交表單

現在我們已經意識到使用同步方式提交表單會造成出現“白頁”的糟糕使用者體驗，那好，現在我使用上一篇分享的技術來將上面同步提交表單調整為非同步提交表單的方式。

    <form id="form1" method="post">
        <table border="1">
            <tr>
                <td>使用者名稱：</td>
                <td>
                    <input type="text" name="loginName" /></td>
            </tr>
            <tr>
                <td>愛  好：</td>
                <td>
                    <input type="checkbox" name="cbLoveYy" value="1" />游泳
                    <input type="checkbox" name="cbLoveYx" value="1" />遊戲
                    <input type="checkbox" name="cbLovePs" value="1" />爬山
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    <input id="btnAjaxSubmit" type="submit" value="jQuery.ajax提交" />
                </td>
            </tr>
        </table>
    </form>

jQuery提交程式碼如下：

    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnAjaxSubmit").click(function () {
                var options = {
                    url: 'async_submit_test1.aspx?action=SaveUserInfo',
                    type: 'post',
                    dataType: 'text',
                    data: $("#form1").serialize(),
                    success: function (data) {
                        if (data.length > 0)
                            $("#responseText").text(data);
                    }
                };
                $.ajax(options);
                return false;
            });
        });
    </script>

我們通過$("#form1").serialize()將表單元素的資料轉化為字串，然後通過$.ajax()執行非同步請求資源。

方案：jQuery.ajax() + .aspx請求

此方案優勢：

1)我們不會感覺頁面的“閃一閃”效果

2)我們不會因為伺服器耗時響應而導致出現“百頁”的糟糕使用者體驗。

此方案劣勢：

1)此方案中我還是使用了aspx頁面去響應請求，只是在後臺通過action引數去做相應處理，儘管是非同步操作但卻完完整整的跑了一遍ASP.NET頁面生命週期（這也是在Response.Write()輸出完自己的東西后必須呼叫Response.End();來提前終止生命週期，否則頁面資訊也會一起返回）

2)jQuery庫提供的序列化表單字串方法不能收集檔案上傳的表單元素，如，$("#form1").serialize()。所以對於包含檔案上傳的表單我們還需通過<iframe>模擬非同步表單提交。（<iframe>模擬非同步表單提交的過程我將在分析jQuery.form外掛的原始碼小節進行說明）

（jQuery庫提供的序列化字串的資料來源時表單的elements屬性，而<input type=”file” />的表單元素不包含在elements中）

當然jQuery.ajax()也可以結合.ashx檔案(一般處理檔案)或其他方式實現高效非同步請求，這邊只是為了說明：非同步請求aspx頁面也會跑一邊aspx頁面生命週期的事實。

jQuery.form外掛輕鬆實現表單提交

現在我們使用jQuery的表單外掛來實現非同步表單提交。

1)該外掛需要Jquery最低版本為v1.5

2)該外掛提供了ajaxSubmit和ajaxForm兩種表單提交方式，但不要對同一個表單同時使用兩種方式。

相關推薦