时间戳

首页 > 解决方案 > 如何使用 Ajax 和 Jquery 读取 XML 响应并在网页中显示它？

jquery - 如何使用 Ajax 和 Jquery 读取 XML 响应并在网页中显示它？

问题描述

我正在创建一个网站，我在其中使用了一个名为holidaywebservice的网络服务。我已经使用 Jquery 和 Ajax 来请求并从服务器获取响应。我也有console.log(result)网络浏览器的控制台选项卡。现在我想当我请求时，响应显示在网页中（例如在表格中）

这是我的代码：

<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</head>

<body>

<div class="table-responsive">
                <table class="table table-striped table-bordered text-left" id="tblData">
                    <thead>
                    <tr class="info">
                        <td>Country</td>
                        <td>HolidayCode</td>
                    </tr>

                    <tbody id="tblBody"></tbody>
                    </thead>
                </table>
            </div>

            <script type="text/javascript">
                $(document).ready(function () {

                var str = '<?xml version="1.0" encoding="UTF-8"?>' +
                        '<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ns1="http://www.holidaywebservice.com/HolidayService_v2/">' +
                          '<SOAP-ENV:Body>' +
                            '<ns1:GetHolidaysForMonth>' +
                              '<ns1:countryCode>UnitedStates</ns1:countryCode>' +
                              '<ns1:year>2018</ns1:year>' +
                              '<ns1:month>06</ns1:month>' +
                            '</ns1:GetHolidaysForMonth>' +
                          '</SOAP-ENV:Body>' +
                        '</SOAP-ENV:Envelope>';

                        //console.log(departureDate);

                        $.ajax({
                            url: 'http://holidaywebservice.com/HolidayService_v2/HolidayService2.asmx?WSDL',
                            method: 'POST',
                            contentType:"text/xml; charset=utf-8",
                            data: str,
                            //headers: {"Authorization": 'Bearer ' + bat},

                            success: function (data) {

                                console.log(data);
                            }

                        });

                });

            </script>

</body>
</html>

这是响应 xml。

<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope
    xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema">
    <soap:Body>
        <GetHolidaysForMonthResponse
            xmlns="http://www.holidaywebservice.com/HolidayService_v2/">
            <GetHolidaysForMonthResult>
                <Holiday>
                    <Country>UnitedStates</Country>
                    <HolidayCode>FLAG-DAY</HolidayCode>
                    <Descriptor>Flag Day</Descriptor>
                    <HolidayType>Notable</HolidayType>
                    <DateType>ObservedActual</DateType>
                    <BankHoliday>NotRecognized</BankHoliday>
                    <Date>2018-06-14T00:00:00</Date>
                </Holiday>
                <Holiday>
                    <Country>UnitedStates</Country>
                    <HolidayCode>FATHERS-DAY</HolidayCode>
                    <Descriptor>Father's Day</Descriptor>
                    <HolidayType>Notable</HolidayType>
                    <DateType>ObservedActual</DateType>
                    <BankHoliday>NotRecognized</BankHoliday>
                    <Date>2018-06-17T00:00:00</Date>
                </Holiday>
            </GetHolidaysForMonthResult>
        </GetHolidaysForMonthResponse>
    </soap:Body>
</soap:Envelope>

更新。

$.ajax({
                            url: 'http://holidaywebservice.com/HolidayService_v2/HolidayService2.asmx?WSDL',
                            method: 'POST',
                            contentType:"text/xml; charset=utf-8",
                            data: str,
                            //headers: {"Authorization": 'Bearer ' + bat},

                            success: function (data) {

                                console.log(data);

                                // Parse XML string into an XML document
                                var parsedXml = $.parseXML(data);

                                // Create a jQuery object from the document
                                var myXml = $(parsedXml);

                                // Find each of the Holiday elements
                                var holidays = myXml.find("Holiday");

                                // Iterate through each element
                                holidays.each(function(index, el) {

                                    // This will output <Country>, <HolidayCode>, etc.
                                    var holidayInfo = el.children;
                                    console.log(holidayInfo);

                                })

                            }

                        });

标签： jqueryajax

解决方案

您可以使用 jQuery 的parseXML函数将响应转换为一个对象，然后您可以从中提取数据：

// Parse XML string into an XML document
var parsedXml = $.parseXML(data);

// Create a jQuery object from the document
var myXml = $(parsedXml);

// Find each of the Holiday elements
var holidays = myXml.find("Holiday");

// Iterate through each element
holidays.each(function(index, el) {

    // This will output <Country>, <HolidayCode>, etc.
    var holidayInfo = el.children;
    console.log(holidayInfo);

})

推荐阅读