Javascript 如何在网页中显示来自Web服务的XML响应
我正在创建一个网站，在这里我使用了一个名为holidaywebservice的web服务。我使用Jquery和Ajax从服务器请求和获取响应。我还将console.log（结果）添加到web浏览器的console选项卡。现在，我希望当我请求时，响应显示在网页中（例如，在表中） 然后我试着像下面这样。但是，在这种情况下，我必须根据请求自己在代码中的“let-soap”中编写响应。之后，我调用了createTableAndContent（soap），它显示了所有的响应。因此，这不是一种可行的方法 如何根据请求在网页中获取和显示响应，而无需编写代码 这是文件Javascript 如何在网页中显示来自Web服务的XML响应,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在创建一个网站，在这里我使用了一个名为holidaywebservice的web服务。我使用Jquery和Ajax从服务器请求和获取响应。我还将console.log（结果）添加到web浏览器的console选项卡。现在，我希望当我请求时，响应显示在网页中（例如，在表中） 然后我试着像下面这样。但是，在这种情况下，我必须根据请求自己在代码中的“let-soap”中编写响应。之后，我调用了createTableAndContent（soap），它显示了所有的响应。因此，这不是一种可行的方法 如
<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>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Country : <input type="text" class="form-control" name="country" value="UnitedStates" id="country">
<br>
</div>
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Year : <input type="text" class="form-control" name="year" value="2018"
id="year"> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Month : <input type="text" class="form-control" name="month" value="06"
id="month"> <br>
</div>
<a href="#" id="ghsubmitbtn" class="btn btn-success">Search</a>
<p id="errorModal"></p> <br>
<div id="ghapidata" class="clearfix"></div>
</form>
<p id="body"></p>
<script type="text/javascript">
$(document).ready(function () {
$('#ghsubmitbtn').on('click', function (e) {
var country = $('#country').val();
var year = $('#year').val();
var month = $('#month').val();
//console.log(departureDate);
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>' + country + '</ns1:countryCode>' +
'<ns1:year>' + year + ' </ns1:year>' +
'<ns1:month>' + month + '</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);
}
});
//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 parser = new DOMParser()
let xmlDoc = parser.parseFromString(data, "text/xml")
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>
</body>
</html>
国家：
年份：
月份：
$（文档）.ready（函数（）{
$（'ghsubmitbtn'）。在（'click'，函数（e）{
var country=$（'#country'）.val（）；
var year=$（“#year”）.val（）；
var month=$（'#month'）.val（）；
//控制台日志（离开日期）；
var str=''+
'' +
'' +
'' +
“+国家+”+
“+年+”+
''+月+''+
'' +
'' +
'';
//控制台日志（离开日期）；
$.ajax({
网址：'http://holidaywebservice.com/HolidayService_v2/HolidayService2.asmx?WSDL',
方法：“POST”，
contentType:“text/xml；charset=utf-8”，
数据：str，
//标题：{“授权”：“持有人”+bat}，
成功：功能（数据）{
控制台日志（数据）；
}
});
//测试功能
createTableAndContent（soap）
});
});
var createTableAndContent=函数（数据）{
让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