Jquery的Ajax调用Web service的function返回xml格式的数据集_jquery 调用webservice接口返回xml-优快云博客

本文链接：https://blog.youkuaiyun.com/cheug/article/details/7808368

之前有整理过，今天特地做了关于返回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>

显示效果