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

来源：互联网发布：java se java ee 关系编辑：程序博客网时间：2024/05/16 14:01

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

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

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

Web service

Imports System.WebImports System.Web.ServicesImports System.Web.Services.ProtocolsImports system.Web.ScriptImports System.DataImports 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 FunctionEnd 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>

显示效果