我正在创建一个网站，在该网站上我使用了名为holidaywebservice的Web服务。我已经使用Jquery和Ajax请求并从服务器获取响应。当我输入详细信息时，它会显示响应。但是，情况是，当我输入不同的详细信息而不重新加载页面时，该响应带有一个旧的响应。
我使用了这个$('#tblData').load(row);。但是，什么都没有发生。
如何显示没有旧回复的新回复？
这是代码。
<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="04"
id="month"> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
Message Id : <input class="form-control" id="messageid" type="text"
placeholder="Results will be placed here..." readonly size="40"/> <br>
</div>
<a href="#" id="ghsubmitbtn" class="btn btn-success">Search</a>
<p id="errorModal"></p> <br>
<div id="ghapidata" class="clearfix"></div>
</form>
</div> <!-- End Of The Col Class -->
<div class="col-md-4 col-sm-6 hero-feature"> <!-- Start Of The Col Class -->
<p id="body"></p> <br><br>
</div> <!-- End Of The Col Class -->
<div class="col-md-4 col-sm-6 hero-feature"> <!-- Start Of The Col Class -->
Demo1 - <p id="demo1"></p>
</div> <!-- End Of The Col Class -->
<div class="col-md-4 col-sm-6 hero-feature"> <!-- Start Of The Col Class -->
Country - <p id="Country"></p>
</div> <!-- End Of The Col Class -->
<div class="col-md-4 col-sm-6 hero-feature"> <!-- Start Of The Col Class -->
HolidayCode - <p id="HolidayCode"></p>
</div> <!-- End Of The Col Class -->
<div class="col-md-4 col-sm-6 hero-feature"> <!-- Start Of The Col Class -->
Descriptor - <p id="Descriptor"></p>
</div> <!-- End Of The Col Class -->
<div class="col-md-4 col-sm-6 hero-feature"> <!-- Start Of The Col Class -->
BankHoliday - <p id="BankHoliday"></p>
</div> <!-- End Of The Col Class -->
<div class="col-md-4 col-sm-6 hero-feature"> <!-- Start Of The Col Class -->
Date - <p id="Date"></p>
</div> <!-- End Of The Col Class -->
</div> <!-- End Of The Col Class -->
<div class="col-md-12 col-sm-12 hero-feature"> <!-- Start Of The Col Class -->
<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>
<td>Descriptor</td>
<td>BankHoliday</td>
<td>Date</td>
</tr>
<tbody id="tblBody"></tbody>
</thead>
</table>
</div>
<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,
dataType: "text",
//headers: {"Authorization": 'Bearer ' + bat},
success: function (data) {
console.log(data);
document.getElementById("demo1").innerHTML=data;
var xml = data,
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$CountryXML = $xml.find( "Country" )[0].childNodes[0].nodeValue;
$( "#Country" ).append( $CountryXML );
//document.getElementById("Country").innerHTML = $y.nodeValue;
//$HolidayCode = $xml.find( "HolidayCode" );
//$( "#HolidayCode" ).append( $HolidayCode.text() );
$HolidayCodeXML = $xml.find( "HolidayCode" )[0].childNodes[0].nodeValue;
$( "#HolidayCode" ).append( $HolidayCodeXML );
$DescriptorXML = $xml.find( "Descriptor" )[0].childNodes[0].nodeValue;
$( "#Descriptor" ).append( $DescriptorXML );
$BankHolidayXML = $xml.find( "BankHoliday" )[0].childNodes[0].nodeValue;
$( "#BankHoliday" ).append( $BankHolidayXML );
$DateXML = $xml.find( "Date" )[0].childNodes[0].nodeValue;
$( "#Date" ).append( $DateXML );
var BookBtn = '<input type="submit" value="Book" name="book" class="btn btn-primary">';
for (var v = 0; v <= 999; v++) {
var row = $('<tr><td>' + $xml.find( "Country" )[v].childNodes[0].nodeValue + '</td><td>'
+ $xml.find( "HolidayCode" )[v].childNodes[0].nodeValue + '</td><td>'
+ $xml.find( "Descriptor" )[v].childNodes[0].nodeValue + '</td><td>'
+ $xml.find( "BankHoliday" )[v].childNodes[0].nodeValue + '</td><td>'
+ $xml.find( "Date" )[v].childNodes[0].nodeValue + '</td><td>'
+ BookBtn + '</td></tr>');
$('#tblData').append(row);}
$('#tblData').load(row);
}
}); //Ajax
//Test function
//createTableAndContent(soap)
}); //Button
});
</script>
</body>
</html>
答案 0 :(得分：1)
您首先需要使用$('#tblData').empty()方法清除表。
或 $("#tblData").empty().append(data)
因此，它会清除您的表并在表中加载一个新数据。
就是这样！