您的位置：首页 > Web前端 > JQuery

Jquery的Ajax调用Web service的function返回xml格式的数据集

2012-07-31 13:29 281 查看

之前有整理过，今天特地做了关于返回xml格式数据集呈现到html的table里面

下面就直接贴代码，大家只需要改想对应的地方就可以直接用，

下面例子是返回两列数据，并在table呈现出来

Web service

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports system.Web.Script
Imports System.Data
Imports System.Xml

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _
Public Class WebService
Inherits System.Web.Services.WebService
Dim str As String = PublicFunction.getconnStr("ldsfisdb")

<WebMethod()> _
Public Function HelloWorld() As String
Return "Hello World"
End Function

<WebMethod()> _
Public Function Getxmlds() As DataSet
Dim SQL As String
Dim i As Integer
Dim ds2, ds As DataSet
ds = New DataSet

SQL = "select SERIAL_NUMBER,POSITION from sfism4.u_sn_tracking_t where mo_number='3S1170048MA' and board_number='KEHJFDY'"
ds2 = OracleHelper.ExecuteDataset(str, CommandType.Text, SQL)
Dim DT As DataTable = New DataTable()
DT.Columns.Add("SERIAL_NUMBER", Type.GetType("System.String"))
DT.Columns.Add("POSITION", Type.GetType("System.String"))
Dim DR As DataRow = DT.NewRow()
If ds2.Tables(0).Rows.Count > 0 Then
For i = 0 To ds2.Tables(0).Rows.Count - 1
DT.Rows.Add(ds2.Tables(0).Rows(i).Item("SERIAL_NUMBER").ToString(), ds2.Tables(0).Rows(i).Item("POSITION").ToString())
Next
ds.Tables.Add(DT)
End If

Return ds
End Function
End Class

html code

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style>
body {font-family:georgia;font-size:12px;}
#books {
border:1px solid #E77D2C;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width:400px;
list-style-type:none;
margin:0;
padding:0;
}
#books li {
padding:5px;
}
#books h1 {
font:14px georgia;
padding:5px;
color:#fff;
background:#E77D2C;
margin:0;
}
</style>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>

<script>
$(document).ready(function(){
$.ajax({
type: "POST",
url: "../WebService.asmx/Getxmlds",
data:{},// {line:tline,shift:tshift,area:tarea}
dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
success: function(result) {
//演示一下捕获
try {
$(result).find("Table1").each(function() {

$('#tbd1').append('<tr class="bsty" border="1px"><td  >'+$(this).find("SERIAL_NUMBER").text()+'</td>\
<td  >'+$(this).find("POSITION").text()+'</td>\
</tr>      ');

});
}
catch (e) {
alert(e);

return;
}
},
error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
if (status == 'error') {
alert(status);

}
}
});
});

</script>

</head>
<body>
<ul id="books">
<h1>My Favorite Books</h1>
<table style="width: 400px; height: 56px" id="tb1" border="1px">
<tbody id="tbd1" ></tbody>
</table>
</ul>

</body>
</html>

显示效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航