Javascript ajax在IE8及以上版本中不起作用
我使用这个ajax调用来推广它的价值观，它在所有其他浏览器中都运行良好，但在IE8中却不行Javascript ajax在IE8及以上版本中不起作用,javascript,ajax,jsp,internet-explorer-8,Javascript,Ajax,Jsp,Internet Explorer 8,我使用这个ajax调用来推广它的价值观，它在所有其他浏览器中都运行良好，但在IE8中却不行 function makedate() { var value1=""; var value2=""; var value3=""; var xmlHttpRequest = getXMLHttpRequest(); xmlHttpRequest.onreadyst
function makedate() {
var value1="";
var value2="";
var value3="";
var xmlHttpRequest = getXMLHttpRequest();
xmlHttpRequest.onreadystatechange = makedateStateHandler(xmlHttpRequest);
$("#button").attr("disabled", "disabled");
var date= document.getElementById("date").value;
var value=document.getElementById("value").value;
// alert(value);
var Appointmentdateformat= document.getElementById("Appointment").options[document.getElementById("Appointment").selectedIndex].value;
//alert(Appointmentdateformat);
var Location = document.getElementById("Location").options[document.getElementById("Location").selectedIndex].value;
var Provider = document.getElementById("Provider").options[document.getElementById("Provider").selectedIndex].value;
// alert(date+Location+Provider+Appointmentdateformat+value) ;
//& Location="+Location+"&Provider="+Provider
xmlHttpRequest.open("POST", "ajaXForgetdatesForAppoinment.jsp?date="+date+"&Location="+Location+"&Provider="+Provider+"&Appointmentdateformat="+Appointmentdateformat+"&value="+value, true);
xmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttpRequest.send(null);
}
function makedateStateHandler(xmlHttpRequest) {
// an anonymous function returned
// it listens to the XMLHttpRequest instance
return function() {
if (xmlHttpRequest.readyState == 4) {
if (xmlHttpRequest.status == 200) {
//document.getElementById('loading').style.visibility = 'hidden';
// $("#select").removeAttr("disabled");
//alert(xmlHttpRequest.responseText);
$("#button").removeAttr("disabled");
document.getElementById("divId").innerHTML = xmlHttpRequest.responseText;
} else {
// alert("HTTP error " + xmlHttpRequest.status + ": " + xmlHttpRequest.statusText);
}
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@page import="pojo.AppointmentDetails"%>
<%@page import="pojo.MiniProvider"%>
<%@page import="pojo.MiniFacility"%>
<%@page import="pojo.Patient"%>
<%@page import="pojo.AppoinmentTimedetails"%>
<%@page import="pojo.AppointmentTypes"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GMQ Physician Associates</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<![endif]-->
<!--[if !IE]> -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- <![endif]-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.22.custom.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/basicnifo.js"></script>
<script type="text/javascript" src="js/datepicker2.js"></script>
<script type="text/javascript" language="javascript" src="js/scripts.js"></script>
<script src="js/jquery.validate.js"></script>
<!--<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
-->
</head>
<%
AppoinmentTimedetails appoinmentTimedetails=null;
Patient patient=new Patient();
patient.setsState("");
AppointmentDetails []appointmentDetails=null;
MiniProvider [] miniProviders=null;
MiniFacility[]miniFacilities =null;
AppointmentTypes []appointmentTypes=null;
miniFacilities=(MiniFacility[])request.getAttribute("miniFacilities");
if(miniFacilities==null){
miniFacilities=new MiniFacility[1];
miniFacilities[0]=new MiniFacility();
miniFacilities[0].setiFacilityId(0);
miniFacilities[0].setsFacilityName("");
}
miniProviders=(MiniProvider[])request.getAttribute("miniProviders");
if(miniProviders==null){
miniProviders=new MiniProvider[1];
miniProviders[0]=new MiniProvider();
miniProviders[0].setiProviderId(0);
miniProviders[0].setsProviderName("");
}
appointmentDetails=(AppointmentDetails[])request.getAttribute("appointmentDetails");
if(appointmentDetails==null){
appointmentDetails=new AppointmentDetails[1];
appointmentDetails[0]=new AppointmentDetails();
appointmentDetails[0].setsStatus("");
appointmentDetails[0].setsFacilityName("");
appointmentDetails[0].setsProviderName("");
appointmentDetails[0].setsStartTime("");
}
appointmentTypes=(AppointmentTypes[])request.getAttribute("appointmentTypes");
if(appointmentTypes==null){
appointmentTypes=new AppointmentTypes[1];
appointmentTypes[0]=new AppointmentTypes();
appointmentTypes[0].setiAppointmentTypesId(0);
appointmentTypes[0].setsCaption("");
}
/*appoinmentTimedetails=(AppoinmentTimedetails)request.getAttribute("appoinmentTimedetails");
if(appoinmentTimedetails==null){
appoinmentTimedetails=new AppoinmentTimedetails();
appoinmentTimedetails.setsLocation("");
appoinmentTimedetails.setsProvider("");
appoinmentTimedetails.setsVisitType("");
}*/
%>
<body>
<div id="main">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="50%"><img src="images/logo.jpg" width="385" height="97" alt="logo" /></td>
<td width="50%"><img src="images/people.jpg" width="327" height="97" class="m1" /></td>
</tr>
<tr>
<td colspan="2"><div class="m2">
<a href="#"><div id="home" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'home')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'home')">HOME</div></a>
<a href="#"><div id="service" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'service')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'service')">SERVICES</div></a>
<a href="#"><div id="provider" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'provider')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'provider')">PROVIDER</div></a>
<a href="#"><div id="register" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'register')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'register')">REGISTRATION</div></a>
<a href="#"><div id="faq" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'faq')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'faq')">FAQ</div></a>
<a href="#"><div id="contact" style="background:url(images/topnav-bt-bg1.png) no-repeat;" class="topnav" onMouseOver="changeBgImage('images/topnav-bt-bg2.png', 'contact')" onMouseOut="changeBgImage('images/topnav-bt-bg1.png', 'contact')">CONTACT</div></a>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="m5">
<tr>
<td valign="top" class="m3">
<div class="m3a">Quick Menu</div>
<div class="m9">
<a href="Basic_info?action=basic"><div id="basic" style="background:url(images/basic-info-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/basic-info-bt2.png', 'basic')" onMouseOut="changeBgImage('images/basic-info-bt1.png', 'basic')">Basic Info</div></a>
<a href="Basic_info?action=appoinments:"><div id="app" style="background:url(images/appointments-bt2.png) no-repeat;" class="leftnav">Appointments</div></a>
<a href="newMessage.jsp">
<div id="newmess" style="background:url(images/new-message-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/new-message-bt2.png', 'newmess')" onMouseOut="changeBgImage('images/new-message-bt1.png', 'newmess')">New Message</div></a>
<a href="Basic_info?action=inbox:"><div id="inbox" style="background:url(images/inbox-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/inbox-bt2.png', 'inbox')" onMouseOut="changeBgImage('images/inbox-bt1.png', 'inbox')">Inbox</div></a>
<a href="Basic_info?action=outbox:"><div id="outbox" style="background:url(images/outbox-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/outbox-bt2.png', 'outbox')" onMouseOut="changeBgImage('images/outbox-bt1.png', 'outbox')">Outbox</div></a>
<a href="Basic_info?action=health-summary:"><div id="health" style="background:url(images/health-summary-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/health-summary-bt2.png', 'health')" onMouseOut="changeBgImage('images/health-summary-bt1.png', 'health')">Health Summary</div></a>
<a href="Basic_info?action=clinical-summary:"><div id="clinical" style="background:url(images/clinical-summary-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/clinical-summary-bt2.png', 'clinical')" onMouseOut="changeBgImage('images/clinical-summary-bt1.png', 'clinical')">Clinical Summary</div></a>
<a href="Basic_info?action=employer-guarantor:"><div id="gurantor" style="background:url(images/employer-gurantor-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/employer-gurantor-bt2.png', 'gurantor')" onMouseOut="changeBgImage('images/employer-gurantor-bt1.png', 'gurantor')">Employer Guarantor</div></a>
<a href="Basic_info?action=insurance:"><div id="insurance" style="background:url(images/insurance-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/insurance-bt2.png', 'insurance')" onMouseOut="changeBgImage('images/insurance-bt1.png', 'insurance')">Insurance</div></a>
<a href="Basic_info?action=patienthistory:"><div id="history" style="background:url(images/patient-history-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/patient-history-bt2.png', 'history')" onMouseOut="changeBgImage('images/patient-history-bt1.png', 'history')">Patient History</div></a>
<a href="Basic_info?action=logout:"><div id="logout" style="background:url(images/logout-bt1.png) no-repeat;" class="leftnav" onMouseOver="changeBgImage('images/logout-bt2.png', 'logout')" onMouseOut="changeBgImage('images/logout-bt1.png', 'logout')">Logout</div></a>
</div>
<div class="m8"> </div>
</td>
<td valign="top" class="m4">
<div class="m4a">Appointments</div>
<div class="m6">
<form action="#" method="post" name="reg" id="reg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="m12"><table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr>
<td style="width:15%;">Location</td>
<td style="width:35%;"><select name="Location" id="Location" class="drop2">
<option value="0">-Select-</option>
<% for(int i=0;i<miniFacilities.length;i++){%>
<option value="<%=miniFacilities[i].getiFacilityId()%>"<%if(patient.getsState().equals(miniFacilities[i].getiFacilityId())){out.println("selected='selected'");} %>><%=miniFacilities[i].getsFacilityName()%></option><% }%>
</select></td>
<td style="width:15%;">Provider</td>
<td width="25%" style="width:35%;"><select name="Provider" id="Provider" class="drop2">
<option value="">-Select-</option>
<% for(int i=0;i<miniProviders.length;i++){%>
<option value="<%=miniProviders[i].getiProviderId()%>"<%if(patient.getsState().equals(miniProviders[i].getiProviderId())){out.println("selected='selected'");} %>><%=miniProviders[i].getsProviderName()%></option><% }%>
</select><br><span id="username_warning" style="color:red"></span></br></td>
</tr>
<tr>
<td>Appointment Date Format</td>
<td ><span style="width:35%;">
<select name="Appointment" id="Appointment" class="drop2" >
<option value="0" selected="selected">-Select-</option>
<option value="Earliest available date" >Earliest available date</option>
<option value="Allow me to pick a Date" >Allow me to pick a Date</option>
</select>
</span></td>
<td id="AppointmentDate">Appointment Date</td>
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="date" id="date" tabindex="1" class="m10 autocompletehealth" value="" /></td>
<tr>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="button" name="button" id="button" value="SEARCH" class="bt-press" onclick=""onmouseover="changeBgImage('images/button-bg2.png', 'update')" onmouseout="changeBgImage('images/button-bg.png', 'update')" />
</td>
</tr>
<table id="divId" >
</table>
<tr >
<td></td>
<td valign="top" style="width:15%;"><br />
</td>
</tr>
</table></div></td>
</tr>
<input type="hidden" name="page" value="appoinments2" class="m10" />
<input type="hidden" name="value" value="" class="m10" id="value"/>
</table>
</form>
</div><!--
<div class="m7"> <br />
</div>
-->
</td>
</tr>
</table>
<!--<div class="foot">GMQ Physician Associates, 100-C, Foley, AL 3655 TEL: (456)789-2343 FAX: (456)789-2343</div>
-->
</div>
<script>
var count=0;
$(document).ready(function(){
//$("#date").hide();
//$("#AppointmentDate").hide();
// alert("");
$( "#date" ).datepicker({ minDate: 0 , dateFormat: "mm-dd-yy"});
});
$("#Appointment").change(function() {
// alert($(this).val());
// $("#date").removeAttr("disabled");
// $( "#Appointment" ).datepicker({ minDate: 0 , dateFormat: "yy-mm-dd"});
$('#Appointment').live('change', function() {
// alert($(this).val());
if ($(this).val() == "Allow me to pick a Date") {
$("#mm").show();
// $("#date").show();
// $("#AppointmentDate").show();
$("#date").datepicker({showOn:'both',dateFormat: "mm-dd-yy"}).focus();
}
if ($(this).val() == "Earliest available date") {
$("#mm").hide();
// $("#date").hide();
// $("#AppointmentDate").hide();
}
});
});
$('#next').live('click', function() {
//alert("next");
$("#username_warning").empty();
if($('#Provider').val()=="") {
var username_length;
username_length = $("#Provider").val().length;
if (username_length <1){
$("#username_warning").append("Please select a provider");
return false;
}}
else {
if(count<1)
{
//alert(count+"less");
count=1;
}
else
{
count=count+1;
//alert(count+"grater");
}
//alert(count);
$('#value').val(count);
///alert($('#value').val()+"count");
//$("#value").value(count);
//alert( $("#value").value());
makedate();
}
});
$('#back').live('click', function() {
//alert("aaaa");
$("#username_warning").empty();
if($('#Provider').val()=="") {
var username_length;
username_length = $("#Provider").val().length;
if (username_length <1){
$("#username_warning").append("Please select a provider");
return false;
}}
else {
if(count<=1)
{
//alert(count+"less");
count=1;
}
else
{
count=count-1;
//alert(count+"grater");
}
//alert(count);
$('#value').val(count);
///alert($('#value').val()+"count");
//$("#value").value(count);
//alert( $("#value").value());
makedate();
}
});
$("#button").click(function() {
$("#username_warning").empty();
if($('#Provider').val()=="") {
//alert("aaaa");
var username_length;
username_length = $("#Provider").val().length;
if (username_length <1){
$("#username_warning").append("Please select a provider");
return false;
}}
else {
count=count+1;
//alert(count);
$('#value').val(count);
///alert($('#value').val()+"count");
//$("#value").value(count);
//alert( $("#value").value());
makedate();
}
});
$('#date').change(function(){
//alert("change") ;
$('#value').val("0");
count=0;
//alert($('#value').val()+"change");
});
var select=false;
$("#appoinmentdate").live('click', function() {
// alert("inside");
select=true;
});
$("#reg").live('submit', function() {
//alert("true0");
if(select== true){
//alert("true");
}
else{
//$("#ps").attr("style=", "display: block;");
return false;
}
});
</script>
</body>
</html>
GMQ医师协会
快捷菜单
约会
位置
-挑选-
供应商
-挑选-
预约日期格式
-挑选-
最早可用日期
请允许我选择一个日期
预约日期
var计数=0；
$（文档）.ready（函数（）{
//$（“#日期”）.hide（）；
//$（“#任命日期”）.hide（）；
//警报（“”）；
$（“#日期”）.datepicker（{minDate:0，dateFormat:“mm-dd-yy”}）；
});
$（“#约会”）。更改（功能（）{
//警报（$（this.val（））；
//$（“#日期”）.removeAttr（“禁用”）；
//$（“#约会”）.datepicker（{minDate:0，dateFormat:“yy-mm-dd”}）；
$（“#约会”）.live（'change'，function（）{
//警报（$（this.val（））；
if（$（this.val（）=“允许我选择一个日期”）{
$（“#mm”）.show（）；
//$（“#日期”）.show（）；
//$（“#任命日期”）.show（）；
$（“#date”）.datepicker（{shown:'both'，dateFormat:'mm-dd-yy}）.focus（）；
}
if（$（this）.val（）=“最早可用日期”）{
$（“#mm”）.hide（）；
//$（“#日期”）.hide（）；
//$（“#任命日期”）.hide（）；
}
});
});
$（'#next'）.live（'单击'，函数（））{
//警报（“下一步”）；
$（“#用户名_警告”）.empty（）；
if（$（'#Provider'）.val（）=“”）{
变量长度；
username_length=$（“#Provider”）.val（）.length；
如果（username_length甚至不要调试那些makedate（）
和makedateStateHandler（）
函数。它们太乱了。如果是你写的代码，很抱歉用了这么严厉的话。如果是别人写的，去踢他们吧！：-）
既然您已经在使用jQuery，那么让我们使用它：
这段简单的代码取代了这两个复杂的函数。这应该是一个很好的替代，一个主要的区别是它在POST正文中发送POST数据参数，而不是URL，这是POST请求的常用方式。但是，大多数服务器代码都应该接受这两种格式的数据
jQuery通过以下几种方式简化了代码：
- 内置
$.ajax（）
而不是复杂的XMLHttpRequest
代码
.val（）
以获取值$（“#foo”）
而不是document.getElementById（）
还有一点非常重要：正确的缩进！原始代码中的缩进到处都是。正确的缩进对于代码的可读性非常重要
在第二次查看代码后，您可能可以进一步简化它。由于您随帖子发送的数据值来自#reg
表单，因此您可以通过一个简单的.serialize（）
调用获取所有这些值：
function makedate() {
$('#button').attr( 'disabled', 'disabled' );
$.ajax({
type: 'POST',
url: 'ajaXForgetdatesForAppoinment.jsp',
data: $('#reg').serialize(),
dataType: 'text',
success: function( data ) {
$('#button').removeAttr( 'disabled' );
$('#divId').html( data );
},
error: function( jqXHR, textStatus, errorThrown ) {
// ...
}
});
}
如果您的服务器代码需要，也可以轻松地将数据参数移动到URL中：
function makedate() {
$('#button').attr( 'disabled', 'disabled' );
$.ajax({
type: 'POST',
url: 'ajaXForgetdatesForAppoinment.jsp?' +
$('#reg').serialize(),
dataType: 'text',
success: function( data ) {
$('#button').removeAttr( 'disabled' );
$('#divId').html( data );
},
error: function( jqXHR, textStatus, errorThrown ) {
// ...
}
});
}
公平警告：当然，这都是未经测试的代码！但它应该给您一个良好的起点。我会记录。要使用JQuery AJAX（您可以在IE中调试并显示一些错误）是的，既然您使用的是JQuery，请使用$.AJAX（）
方法来避免任何跨浏览器的不一致：对于“不工作（ing）”问题的唯一有效答案是对于初学者来说，“你做错了什么”；是否存在错误（对于调试工具，请按IE中的F12键）？是它提出了请求吗？我认为Aura可能是对的，而您创建的xhr对象是错误的，但这似乎是您没有发布的唯一代码。我同意前面的评论，您应该使用$.ajax或$。post@HMR在ie中调试时，我收到一条错误消息，如SCRIPT600：此操作的目标元素无效。basicnifo.js，第95行字符12@abhi感谢您提供更多信息。导致该错误的那一行是您发布的代码中的哪一行？可能是第三方脚本中的，因此您可以检查堆栈。在IE中，您可以按F12键，在脚本标记中有一个按钮“开始调试”。当错误发生时，它应该暂停在那里，如果它在您发布的代码中，请提供发生错误的行，如果它不在您的代码中，请检查“调用堆栈”我复制了上面的代码，但它在ie 8中仍然不起作用，当我点击按钮时，请求不会进入AjaxForgetDatesForapoiment.jsp页面你使用的是哪个版本的代码？它实际上是在调用这个代码吗？如果你放一些console.log 调用它？或者放入一些调试器
语句，并在调试器停止时查看调试器？我希望（1）我出了问题，它在任何浏览器中都不能工作，或者（2）它在所有浏览器中都能工作。我不希望此代码在其他浏览器中工作，但在IE8中不能。谢谢@Michael Ge
function makedate() {
$('#button').attr( 'disabled', 'disabled' );
$.ajax({
type: 'POST',
url: 'ajaXForgetdatesForAppoinment.jsp?' +
$('#reg').serialize(),
dataType: 'text',
success: function( data ) {
$('#button').removeAttr( 'disabled' );
$('#divId').html( data );
},
error: function( jqXHR, textStatus, errorThrown ) {
// ...
}
});
}