jQuery实现Ajax功能示例续 -- 读取dataset

　　此文为上一个例子的延续，是json数据类型读取数据库中的字段。但是，有时我们需要读取整张表，或者是读取几个字段的信息。这时假如还继续使用list的形式就不太对了。我想能不能就把Dataset 对象传到页面中。这样不就解决了问题，dataset中数据对象的格式是xml，所以，页面中直接来处理xml就能把数据拿到我们的控件里了。现在我们看看应该怎么改上一例子的代码。

　　1.首先，我们要改动webservice中的方法的返回值类型。以下代码有什么不同呢？很明显，我加了ResponseFormat，将response类型改为xml. 然后修改返回值类型为xml.

<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> _
Public Function LoadOrderNbrs(ByVal strSSOrderNbr As String, ByVal strSSLineNbr As Integer, ByVal instanceName As String) As String
Dim dtOrders As DataSet
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 dtOrders.GetXml()
End Function

　　2.看看jQuery是怎么读取xml文件的。这里要注意两点， datatype 一定要改成xml。 还有一点就是， contentType 后面要加charset=utf-8。这个我也不清楚为什么，可能是字符解析问题，反正加上吧！

// ajax get data
$().ready(function() {
$("#btnOrderNbr").click(function() {
$("#btnApply").hide();
$("#resultDiv").hide();
$('#<%=ddlOrderNbrs.ClientID%> > option').remove();
$('#<%=ddlooline.ClientID%> > option').remove();
var ordNum = $("#txtSSOrderNbr").val();
var lineNum = $("#txtSOline").val();
var lblmsg = $("#<%=lblerror.ClientID %>");
if (ordNum.trim() == "") {
lblmsg.html("please input sales office order number");
return false;
} else if (lineNum == 0 || lineNum == null) {
lblmsg.html("please input sales office line number");
return false;
}
else {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8;",
url: "OrderNumService.asmx/LoadOrderNbrs",
data: "{strSSOrderNbr:'" + ordNum + "',strSSLineNbr:'" + lineNum + "',instanceName:'" + GetInstanceName() + "'}",
dataType: 'xml',
success: showAjaxResult,
error: function(XMLHttpRequest, textStatus, errorThrown) {
lblmsg.ajaxError(function(event, request, settings) {
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
}
});
}
});

　　3. showAjaxResult 代码

function showAjaxResult(xml) {
//debugger;
try {
var ddlordernbrs = $('#<%=ddlordernbrs.clientid%>');
var ddlooline = $('#<%=ddlooline.clientid%>');
//message
var lblmsg = $("#<%=lblerror.ClientID %>");
var btnApply = $("#btnApply");
var rltDiv = $("#resultDiv");
if ($(xml).find('Table').length > 0) {
rltDiv.show();
btnApply.show();
lblmsg.html("");
$(xml).find('Table').each(function() {
var orderNbr = $(this).find('ORDER_NUMBER').text();
var lineNbr = $(this).find('LINE_NUMBER').text();
ddlordernbrs.append($("<option value='" + orderNbr + "'>" + orderNbr + "</option>"));
ddlooline.append($("<option value='" + lineNbr + "'>" + lineNbr + "</option>"));
});
} else {
rltDiv.hide();
btnApply.hide();
lblmsg.html("No order number available for this search. ");
}
}
catch (err) {
var txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.description + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
}

欢迎转载，请注明出处，欢迎拍砖！ 转到上一个例子： jQuery实现Ajax功能示例

快乐的程序员