Javascript Ajax现在可以正常工作了
我正在努力开发一个酒店预订网站。。它就像在第一页,你必须选择一个目的地,签入日期和签出日期与人数。 在第2页中,its显示该目的地的可用酒店数量,选择酒店后,您将被引导到第3页,其中显示该酒店的房间类型和房间价格,并提供预订选项 第三页还允许您根据入住人数更改入住和退房日期 我已经使用Ajax进行了这些更改,并根据新选择的日期给出了房间的新价格: 但是我的这个功能不能正常工作。请帮我解决这个问题Javascript Ajax现在可以正常工作了,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我正在努力开发一个酒店预订网站。。它就像在第一页,你必须选择一个目的地,签入日期和签出日期与人数。 在第2页中,its显示该目的地的可用酒店数量,选择酒店后,您将被引导到第3页,其中显示该酒店的房间类型和房间价格,并提供预订选项 第三页还允许您根据入住人数更改入住和退房日期 我已经使用Ajax进行了这些更改,并根据新选择的日期给出了房间的新价格: 但是我的这个功能不能正常工作。请帮我解决这个问题 <script type="text/javascript"> function ad
<script type="text/javascript">
function addR()
{
var term_name = $('#FromDate').val(); //Storing the value of textbox into a variable
var ToDate = $('#ToDate').val(); //Storing the value of textbox into a variable
var SessionID = $('#SessionID').val(); //Storing the value of textbox into a variable
var HotelID = $('#HotelID').val(); //Storing the value of textbox into a variable
var Adult = $('#Adult').val(); //Storing the value of textbox into a variable
var Child = $('#Child').val(); //Storing the value of textbox into a variable
var ajRoomNo = $('#ajxRoomNo').val(); //Storing the value of textbox into a variable
if(term_name == '') //Checking for NULL
{
$('#propspectDiv').html('Please Enter Your Check-In Date'); //Prints the progress text into our Progress DIV
$('#FromDate').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(ToDate == '') //Checking for NULL
{
$('#propspectDiv').html('Please Enter Your Check-Out Date'); //Prints the progress text into our Progress DIV
$('#ToDate').addClass('error'); //Adding the error class to the progress DIV
return;
}
/*IF ROOM NO IS 1*/
if(Adult >= '4' && ajRoomNo == '1') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Adult').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '1' && Adult >= '3' && ajRoomNo == '1') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '2' && Adult >= '2' && ajRoomNo == '1') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '3' && Adult >= '1' && ajRoomNo == '1') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
/*IF ROOM NO IS 2*/
if(Child >= '5' && Adult >= '2' && ajRoomNo == '2') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '4' && Adult >= '3' && ajRoomNo == '2') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '3' && Adult >= '4' && ajRoomNo == '2') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '2' && Adult >= '5' && ajRoomNo == '2') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '1' && Adult >= '6' && ajRoomNo == '2') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '6' && Adult >= '1' && ajRoomNo == '2') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
/*IF ROOM NO IS 3*/
if(Child >= '5' && Adult >= '6' && ajRoomNo == '3') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '4' && Adult >= '6' && ajRoomNo == '3') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
if(Child >= '5' && Adult >= '5' && ajRoomNo == '3') //Checking for NULL
{
$('#propspectDiv').html('No. of guests exceed room capacity. Please add extra room!'); //Prints the progress text into our Progress DIV
$('#Child').addClass('error'); //Adding the error class to the progress DIV
return;
}
else{
$('#FromDate').removeClass('error');
$('#propspectDiv').removeClass('error'); //Removing the error class from the progress DIV
$('#propspectDiv').html('Submitting your Request.<img src="<?php print 'http://'.$_SERVER['SERVER_NAME'];?>/ajax.gif" />'); //Prints the progress text into our Progress DIV
$.ajax({
url : '<?php print 'http://'.$_SERVER['SERVER_NAME'];?>/data.php', //Declaration of file, in which we will send the data
data:{
//"name" : term_name //we are passing the name value in URL
"FromDate" : term_name,
"ToDate" : ToDate, //we are passing the name value in URL
"SessionID" : SessionID, //we are passing the name value in URL
"HotelID" : HotelID, //we are passing the name value in URL
"Adult" : Adult, //we are passing the name value in URL
"Child" : Child, //we are passing the name value in URL
"ajxRoomNo" :ajRoomNo //we are passing the name value in URL
},
success : function(data){
window.setTimeout(function(){
$('#propspectDiv').html('Your search criteria has been updated'); //Prints the progress text into our Progress DIV
$('#data').css("display","block"); //Changes the style of table from display:none to display:block
$('#data').html(data); //Prints the data into the table
}, 2000);
}
});
}
}
</script>
我通过提交按钮的现场更改功能是:
<!--Start Modify Search-->
<div>
Modify your Search
<div class="con">
<div id="w">
<table cellpadding="2" cellspacing="1" border="1" width="100%">
<input type="hidden" id="HotelID" value="<?php print $ghi;?>" />
<input type="hidden" id="SessionID" value="<?php print $SessionI;?>" />
<thead>
<tr>
<td class="roomvalues">Check-in Date : </td>
<td class="roomvalues">Check-out Date : </td>
<td class="roomvalues">Room (Select 1-5)</td>
<td class="roomvalues">Adult</td>
<td class="roomvalues">Children</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="From-Date" value="<?php if($searchfirstdate!='01/01/1991'){echo '$searchfirstdate';}else{ echo "";}?>" id="FromDate" class="input1 date-picker required date" style="border:1px #7F9DB9 solid;"/></td>
<td><input type="text" name="ToDate" value="<?php if($searchenddate!='01/01/1970'){echo $searchenddate;}else{ echo "";}?>" id="ToDate" class="input1 date-picker2 required date" style="border:1px #7F9DB9 solid;"/></td>
<td>
<!--<select name="ajxRoomNo" id="ajxRoomNo">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>-->
<select name="ajxRoomNo" id="ajxRoomNo">
<option value="1" <?php if($RoomNo==1) echo "selected"; ?>>1</option>
<option value="2" <?php if($RoomNo=='2') echo "selected"; ?>>2</option>
<option value="3" <?php if($RoomNo=='3') echo "selected"; ?>>3</option>
<option value="4" <?php if($RoomNo=='4') echo "selected"; ?>>4</option>
<option value="5" <?php if($RoomNo=='5') echo "selected"; ?>>5</option>
</select>
</td>
<td>
<select name="Adult" id="Adult">
<option value="1"<?php if($person=='1') echo "selected"; ?>>1</option>
<option value="2"<?php if($person=='2') echo "selected"; ?>>2</option>
<option value="3"<?php if($person=='3') echo "selected"; ?>>3</option>
<option value="4"<?php if($person=='4') echo "selected"; ?>>4</option>
<option value="5"<?php if($person=='5') echo "selected"; ?>>5</option>
<option value="6"<?php if($person=='6') echo "selected"; ?>>6</option>
</select>
</td>
<td>
<select name="Child" id="Child">
<option value="0"<?php if($children=='0') echo "selected"; ?>>0</option>
<option value="1"<?php if($children=='1') echo "selected"; ?>>1</option>
<option value="2"<?php if($children=='2') echo "selected"; ?>>2</option>
<option value="3"<?php if($children=='3') echo "selected"; ?>>3</option>
<option value="4"<?php if($children=='4') echo "selected"; ?>>4</option>
<option value="5"<?php if($children=='5') echo "selected"; ?>>5</option>
</select>
</td>
</tr>
<tr>
<td colspan="5">
<input type="button" class="mys" value="Search" onClick="addR()" />
</td>
</tbody>
</table>
<div id="propspectDiv"></div>
</div>
</div>
</div>
<!--End Modify Search-->
试试这个。我试图在JSFIDLE中运行您的代码,控制台给了我一些错误。我帮你修好了。数据URL的封装存在问题 将JS脚本中的else部分替换为
var inhtml = "Submitting your Request.<img src='http://<?php echo $_SERVER['SERVER_NAME']; ?>/ajax.gif' />";
var urlsend = "<?php print 'http://'.$_SERVER['SERVER_NAME']; ?>/data.php";
$('#FromDate').removeClass('error');
$('#propspectDiv').removeClass('error'); //Removing the error class from the progress DIV
$('#propspectDiv').html(inhtml); //Prints the progress text into our Progress DI
$.ajax({
url : urlsend, //Declaration of file, in which we will send the data
data:{
//"name" : term_name //we are passing the name value in URL
"FromDate" : term_name,
"ToDate" : ToDate, //we are passing the name value in URL
"SessionID" : SessionID, //we are passing the name value in URL
"HotelID" : HotelID, //we are passing the name value in URL
"Adult" : Adult, //we are passing the name value in URL
"Child" : Child, //we are passing the name value in URL
"ajxRoomNo" :ajRoomNo //we are passing the name value in URL
},
success : function(data){
window.setTimeout(function(){
$('#propspectDiv').html('Your search criteria has been updated'); //Prints the progress text into our Progress DIV
$('#data').css("display","block"); //Changes the style of table from display:none to display:block
$('#data').html(data); //Prints the data into the table
}, 2000);
}
});
定义工作不正常。你有什么迹象表明有问题?JavaScript控制台上是否有错误?意外的行为?当您调试它时,预期的行为会在什么时候发生变化?当日期从此处更改时,它不再获取房间,而只是给出成功消息