使用 Jquery 从 Web 服务获取多个数据

Question

我有一个 returns 数据表的网络服务功能...我想从这个 table1 个标签添加数据...

  <Table1 diffgr:id="Table11" msdata:rowOrder="0">
    <ProductID>1</ProductID><ProductName>A</ProductName><AvailableProduct>8</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table12" msdata:rowOrder="1">
    <ProductID>2</ProductID><ProductName>B</ProductName><AvailableProduct>3</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table13" msdata:rowOrder="2">
    <ProductID>3</ProductID><ProductName>C</ProductName><AvailableProduct>7</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table14" msdata:rowOrder="3">
    <ProductID>4</ProductID><ProductName>D</ProductName><AvailableProduct>0</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table15" msdata:rowOrder="4">
    <ProductID>5</ProductID><ProductName>E</ProductName><AvailableProduct>3</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table16" msdata:rowOrder="5">
    <ProductID>6</ProductID><ProductName>F</ProductName><AvailableProduct>1</AvailableProduct>
    </Table1>

这是我的 Jquery 代码...这不会向 table 添加任何内容我该如何解决这个问题

  $(document).ready(function () {
        $("#Btn").click(function () {
            alert();

            $.ajax({
                type: 'POST',
                url: 'WebserviceDS.asmx/GetTable',
                dataType: 'xml',
                data:"{}",
                Success: function (xml) {
                    $(xml).find('Table1').each(function () {
                        $("<tr><td>" + $(xml).find('ProductID').text() + "</td>").appendTo("table");
                        alert($(xml).find('ProductID').text());
                        $("<td>" + $(xml).find('ProductName').text() + "</td>").appendTo("table");
                        $("<td>" + $(xml).find('AvailableProduct').text() + "</td></tr>").appendTo("table");
                    })
                },
                error: function (err) {
                    alert(err);
                }

            });
            return false;
        })
    })

在这些警报中，它不会显示任何内容..这是我的 HTML 代码

<body>

    <form id="form1" runat="server">
        <div>
            <button id="Btn">Click Me</button>
            <table>
                <tr>
                    <th>ProductID</th>
                    <th>ProductName</th>
                    <th>AvailableProduct</th>
                </tr>

            </table>
        </div>
    </form>
</body>

Answer 1

在 each() 中使用回调 value 访问索引处的对象。
创建完整的 <TR> 然后追加必要的 <TD> 子元素然后最后追加 <TR> 到 Table.

例子

$(xml)
    .find('Table1')
    .each(function (index, value) {
        var tr = $('<tr>');
        tr.append($('<td>').text($(value).find('ProductID').text()));
        tr.append($('<td>').text($(value).find('ProductName').text()));
        tr.append($('<td>').text($(value).find('AvailableProduct').text()));
        tr.appendTo("table");
    });

使用 Jquery 从 Web 服务获取多个数据

Get multiple Data from web service using Jquery

html

xml

jquery

web-services

asp.net-ajax