jQuery实现Ajax功能示例

jQuery实现Ajax功能示例

简介：

　　这是一个简单的Ajax功能，弹出一个窗口，然后输入一个值，通过Webservice 来获取数据库中返回值然后绑定到界面上的dropdownlist。

　　开发工具为 Visual Studio 2008, 使用到的技术有JQuery, VB.NET, Webservice

    当点击Search按钮时，将执行Ajax, 返回结果将绑定到dropdownlist中

引入JQuery 库以及弹出窗口的UI库，网上有下

    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="Scripts/jqModal.js"></script>

以下为Ajax的执行代码：

<script type="text/javascript">
        //Jquery pop up window
        $().ready(function() {
            $('#OrderNbrSearch').jqm();
        });
        // ajax get data
        $().ready(function() {
            $("#btnOrderNbr").click(function() {
                $('#<%=ddlOrderNbrs.ClientID%> > option').remove();
                var ordNum = $("#txtSSOrderNbr").val();
                if (ordNum.trim() == "") {
                    alert("Please input Order Number");
                } else {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json",
                        url: "OrderNumService.asmx/LoadOrderNbrs",
                        data: "{strSSOrderNbr:'" + ordNum + "',instanceName:'" + GetInstanceName() + "'}",
                        dataType: 'json',
                        success: function(result) {
                            $(result.d).each(function() {
                                $('#<%=ddlOrderNbrs.ClientID%>').append($("<option value='" + this.toString() + "'>" + this.toString() + "</option>"));
                            });
                        }
                    });
                }
            });
            // apply this value to order number
            $("#btnApply").bind('click', function() {
                if ($('#<%=ddlOrderNbrs.ClientID%>').val() != null) {
                    var CurrentTab = $find('<%=Tabs.ClientID%>').get_activeTabIndex();
                    switch (CurrentTab) {
                        case 0: $("#<%=txtOrderNum.ClientID %>").val($('#<%=ddlOrderNbrs.ClientID%>').val()); break;
                        case 1: $("#<%=txtOracleNum2.ClientID %>").val($('#<%=ddlOrderNbrs.ClientID%>').val()); break;
                    }
                } else {
                    $("#<%=txtOrderNum.ClientID %>").val("");
                    $("#<%=txtOracleNum2.ClientID %>").val("");
                }
                $("#OrderNbrSearch a").trigger('click');
            });
        });

        // ajax onloading
        $().ready(function() {
            $('#loading').ajaxStart(function() {
                $(this).show();
            }).ajaxStop(function() {
                $(this).hide();
            });
        });
    </script>

Html页面代码：

<div id="OrderNbrSearch" class="jqmWindow">
        <a href="#" class="jqmClose regular" style="display:block; float:right;">Close</a>
        <div id="tab3" style=" background: #fee;">
            <div id="tabtop-L3">
                <strong style="color: black; font-size: 15px">Order Number Search</strong>
            </div>
            <table style="width: 95%; height: 75px;">
                <tr>
                    <td style="text-align: right" class="style4">
                        <asp:Label ID="Label1" Width="163px" runat="server" Text="Sales Office Order Nbr:"
                            Height="20px"></asp:Label>
                    </td>
                    <td class="style3">
                        <input id="txtSSOrderNbr" type="text" style="height:21px; width:150px;"/>
                    </td>
                    <td class="style1">
                        <input id="btnOrderNbr" type="button" value="Search" style="height:30px; width:87px;"/>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right" class="style4">
                        <asp:Label ID="Label2" runat="server" Width="163px" Text="Oracle Order Nbr:"></asp:Label>
                    </td>
                    <td class="style3">
                        <asp:DropDownList ID="ddlOrderNbrs" runat="server" Style="text-align: left; height:21px; margin-left: 0px"
                            Width="150px">
                        </asp:DropDownList>
                    </td>
                    <td class="style1">
                        <input type="button" id="btnApply" value="Apply" style="height:30px;width:88px;"/>
                    </td>
                </tr>
                <tr>
                    <td class="style4">
                    </td>
                    <td class="style3">
                        
                    </td>
                    <td class="style1">
                    </td>
                </tr>
                <tr><td><div id="loading">Loading ...</div></td><td></td><td></td></tr>
            </table>
                
        </div>
    </div>

Web Service 代码：

  <WebMethod()> _
    Public Function LoadOrderNbrs(ByVal strSSOrderNbr As String, ByVal strSSLineNbr As Integer, ByVal instanceName As String) As String()
        Dim dtOrders As DataTable
        dtOrders = bzLayerObj.LoadOrderNbrs(strSSOrderNbr, strSSLineNbr, instanceName)

        Dim list As New List(Of String)()
        Dim s As String

        For Each row As DataRow In dtOrders.Rows
            s = row.Item("ORDER_NUMBER")
            If s <> String.Empty Then
                list.Add(s)
            End If
        Next row
        Return list.ToArray()
    End Function

欢迎转载，收藏，请注明出处......   下一示例 jQuery Ajax读取dataset

快乐的程序员