jQuery实现Ajax功能示例
简介:
这是一个简单的Ajax功能,弹出一个窗口,然后输入一个值,通过Webservice 来获取数据库中返回值然后绑定到界面上的dropdownlist。
开发工具为 Visual Studio 2008, 使用到的技术有JQuery, VB.NET, Webservice
当点击Search按钮时,将执行Ajax, 返回结果将绑定到dropdownlist中
引入JQuery 库以及弹出窗口的UI库,网上有下
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<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页面代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<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
快乐的程序员