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

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

jquery ajax

如何使用Ajax和Jquery读取XML响应并在网页中显示它？,jquery,ajax,Jquery,Ajax,我正在创建一个网站，我使用了一个名为holidaywebservice的web服务。我使用Jquery和Ajax从服务器请求和获取响应。我还将console.log（result）添加到web浏览器的console选项卡。现在，我希望当我请求时，响应显示在网页中（例如，在表中）这是我的密码： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jque

我正在创建一个网站，我使用了一个名为holidaywebservice的web服务。我使用Jquery和Ajax从服务器请求和获取响应。我还将

console.log（result）

添加到web浏览器的console选项卡。现在，我希望当我请求时，响应显示在网页中（例如，在表中）

这是我的密码：

<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>


国家
度假代码
$（文档）.ready（函数（）{
var str=''+
'' +
'' +
'' +
“美国”+
'2018' +
'06' +
'' +
'' +
'';
//控制台日志（离开日期）；
$.ajax({
网址：'http://holidaywebservice.com/HolidayService_v2/HolidayService2.asmx?WSDL',
方法：“POST”，
contentType:“text/xml；charset=utf-8”，
数据：str，
//标题：{“授权”：“持有人”+bat}，
成功：功能（数据）{
控制台日志（数据）；
}
});
});

下面是响应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>


美国
卖旗日
卖旗日
值得注意的
实际观察
不认识
2018-06-14T00:00:00
美国
父亲节
父亲节
值得注意的
实际观察
不认识
2018-06-17T00:00:00

更新

$.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);

                                })

                            }

                        });

$.ajax({
网址：'http://holidaywebservice.com/HolidayService_v2/HolidayService2.asmx?WSDL',
方法：“POST”，
contentType:“text/xml；charset=utf-8”，
数据：str，
//标题：{“授权”：“持有人”+bat}，
成功：功能（数据）{
控制台日志（数据）；
//将XML字符串解析为XML文档
var parsedXml=$.parseXML（数据）；
//从文档创建jQuery对象
var myXml=$（parsedXml）；
//找到每个假日元素
var holidays=myXml.find（“假日”）；
//遍历每个元素
假日。每个功能（索引，el）{
//这将导致输出等。
var holidayInfo=el.children；
控制台日志（holidayInfo）；
})
}
});

您可以使用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);

})

//将XML字符串解析为XML文档
var parsedXml=$.parseXML（数据）；
//从文档创建jQuery对象
var myXml=$（parsedXml）；
//找到每个假日元素
var holidays=myXml.find（“假日”）；
//遍历每个元素
假日。每个功能（索引，el）{
//这将导致输出等。
var holidayInfo=el.children；
控制台日志（holidayInfo）；
})
<代码> > p>对于本机JavaScript解决方案，您可以考虑以下
let soap = response
parser = new DOMParser()
xmlDoc = parser.parseFromString(soap,"text/xml")


let holidayCount = xmlDoc.getElementsByTagName("Holiday").length
let body = document.getElementById("body")    

for (var i = 0; i < holidayCount; i++) {

    //build table here instead of below elements.        

    let span = document.createElement("span")
    let spanNode = document.createTextNode("Holiday " + i)
    span.appendChild(spanNode)
    body.appendChild(span)

    let country = xmlDoc.getElementsByTagName("Country")[i].childNodes[0].nodeValue
    let para = document.createElement("p")
    let node = document.createTextNode("Country: " + country)
    para.appendChild(node)  
    body.appendChild(para)


    let holidayCode = xmlDoc.getElementsByTagName("HolidayCode")[i].childNodes[0].nodeValue)
    let countryPara = document.createElement("p")
    let countryNode = document.createTextNode("HolidayCode: " + holidayCode)
    countryPara.appendChild(CountryNode)    
    body.appendChild(CountryPara)


    } 

let soap=response
parser=newdomparser（）
xmlDoc=parser.parseFromString（soap，“text/xml”）
让holidayCount=xmlDoc.getElementsByTagName（“假日”）.length
让body=document.getElementById（“body”）
对于（变量i=0；i

这里是建立一个表的步骤：
let createTd = function(value){
    let td = document.createElement('TD')
    let textNode = document.createTextNode(value)
    td.appendChild(textNode)
    return td  
 }    

let body = document.getElementById("body")
let table = document.createElement('TABLE')
let tableBody = document.createElement('TBODY')

table.border = '1'
table.appendChild(tableBody);

let heading = ["Country", "HolidayCode", "Descriptor", "HolidayType", "DateType", "BankHoliday", "Date"]   

//TABLE COLUMNS
let tr = document.createElement('TR')
tableBody.appendChild(tr)
for (i = 0; i < heading.length; i++) {
    let th = document.createElement('TH')
    th.width = '75'
    th.appendChild(document.createTextNode(heading[i]))
    tr.appendChild(th)
}

let parser = new DOMParser()
//soap == the response from your ajax call
let xmlDoc = parser.parseFromString(soap,"text/xml")        

//TABLE ROWS
for (i = 0; i < xmlDoc.getElementsByTagName('Holiday').length; i++) {
    let tr = document.createElement('TR')      

     let country = xmlDoc.getElementsByTagName('Country')[i].childNodes[0].nodeValue
     let countryTd = createTd(country)  
     tr.appendChild(countryTd)

     let holidayCode = xmlDoc.getElementsByTagName('HolidayCode')[i].childNodes[0].nodeValue
     let holidayCodeTd = createTd(holidayCode)  
     tr.appendChild(holidayCodeTd)

     let descriptor = xmlDoc.getElementsByTagName('Descriptor')[i].childNodes[0].nodeValue
     let descriptorTd = createTd(country)   
     tr.appendChild(descriptorTd)

     let holidayType = xmlDoc.getElementsByTagName('HolidayType')[i].childNodes[0].nodeValue
     let holidayTypeTd = createTd(holidayType)  
     tr.appendChild(holidayTypeTd)

     let dateType = xmlDoc.getElementsByTagName('DateType')[i].childNodes[0].nodeValue
     let dateTypeTd = createTd(country) 
     tr.appendChild(dateTypeTd)

     let bankHoliday = xmlDoc.getElementsByTagName('BankHoliday') [i].childNodes[0].nodeValue
     let bankHolidayTd = createTd(bankHoliday)  
     tr.appendChild(bankHolidayTd)

     let date = xmlDoc.getElementsByTagName('Date')[i].childNodes[0].nodeValue
     let dateTd = createTd(date)    
     tr.appendChild(dateTd)         

    tableBody.appendChild(tr)
}  

body.appendChild(table)

让createTd=函数（值）{
设td=document.createElement（'td'）
让textNode=document.createTextNode（值）
td.appendChild（textNode）
返回td
}    
让body=document.getElementById（“body”）
let table=document.createElement（'table'）
让tableBody=document.createElement（'TBODY'）
table.border='1'
table.appendChild（表体）；
标题=[“国家”、“假日代码”、“描述符”、“假日类型”、“日期类型”、“银行假日”、“日期”]
//表列
让tr=document.createElement（'tr'）
tableBody.appendChild（tr）
对于（i=0；i<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 id="body">


</body>

<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) {
                    createTableAndContent(data)
                },                
                error: function (data){
                    console.log(data)
                }


            })


            //Test function
            //createTableAndContent(soap)
    })





     var createTableAndContent = function(data){
        let body = document.getElementById("body")
        let table = document.createElement('TABLE')
        let tableBody = document.createElement('TBODY')

        table.border = '1'
        table.appendChild(tableBody);

        let heading = ["Country", "HolidayCode", "Descriptor", "HolidayType", "DateType", "BankHoliday", "Date"]   

        //TABLE COLUMNS
        let tr = document.createElement('TR')
        tableBody.appendChild(tr)
        for (i = 0; i < heading.length; i++) {
            let th = document.createElement('TH')
            th.width = '75'
            th.appendChild(document.createTextNode(heading[i]))
            tr.appendChild(th)
        }


        let xmlDoc = data       

        let createTd = function(value){
            let td = document.createElement('TD')
            let textNode = document.createTextNode(value)
            td.appendChild(textNode)
            return td  
        }    


        //TABLE ROWS
        for (i = 0; i < xmlDoc.getElementsByTagName('Holiday').length; i++) {
            let tr = document.createElement('TR')      

            let country = xmlDoc.getElementsByTagName('Country')[i].childNodes[0].nodeValue
            let countryTd = createTd(country)  
            tr.appendChild(countryTd)

            let holidayCode = xmlDoc.getElementsByTagName('HolidayCode')[i].childNodes[0].nodeValue
            let holidayCodeTd = createTd(holidayCode)  
            tr.appendChild(holidayCodeTd)

            let descriptor = xmlDoc.getElementsByTagName('Descriptor')[i].childNodes[0].nodeValue
            let descriptorTd = createTd(country)   
            tr.appendChild(descriptorTd)

            let holidayType = xmlDoc.getElementsByTagName('HolidayType')[i].childNodes[0].nodeValue
            let holidayTypeTd = createTd(holidayType)  
            tr.appendChild(holidayTypeTd)

            let dateType = xmlDoc.getElementsByTagName('DateType')[i].childNodes[0].nodeValue
            let dateTypeTd = createTd(country) 
            tr.appendChild(dateTypeTd)

            let bankHoliday = xmlDoc.getElementsByTagName('BankHoliday') [i].childNodes[0].nodeValue
            let bankHolidayTd = createTd(bankHoliday)  
            tr.appendChild(bankHolidayTd)

            let date = xmlDoc.getElementsByTagName('Date')[i].childNodes[0].nodeValue
            let dateTd = createTd(date)    
            tr.appendChild(dateTd)         

            tableBody.appendChild(tr)
        }  

        body.appendChild(table)
    }




    //Data for testing.
    let soap = `<?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>`


</script>

</html>