javascript - ajax 在 IE8 及更高版本中不起作用

Question

我已经使用这个 ajax 调用来获取 populatig 值，它在所有其他浏览器中都可以正常工作，但在 iE 8 中则不行

  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);
                      }
                    }
                  }
                }

这是我调用此 Ajax 函数的 JSP 页面

<!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">&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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">&nbsp;<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>

谁能帮我解决这个问题？

score 2 · Accepted Answer

甚至不要尝试调试这些makedate()和makedateStateHandler()功能。他们太乱了。如果您编写了该代码，请对这些苛刻的话表示抱歉。如果是别人写的，去踢他们！:-)

由于您已经在使用 jQuery，让我们使用它：

function makedate() {
    $('#button').attr( 'disabled', 'disabled' );
    $.ajax({
        type: 'POST',
        url: 'ajaXForgetdatesForAppoinment.jsp',
        data: {
            date: $('#date').val(),
            Location: $('#Location').val(),
            Provider: $('#Provider').val(),
            Appointmentdateformat: $('#Appointment').val(),
            value: $('#value').val()
        },
        dataType: 'text',
        success: function( data ) {
            $('#button').removeAttr( 'disabled' );
            $('#divId').html(data );
        },
        error: function( jqXHR, textStatus, errorThrown ) {
            // ...
        }
    });
}

这个简单的代码替换了这两个复杂的功能。它应该是一个直接的替代品，一个主要的区别是它以 POST 请求的通常方式在 POST 正文而不是 URL 中发送 POST 数据参数。但是，大多数服务器代码应该接受任何一种格式的数据。

jQuery 在以下几个方面使这段代码更简单：

内置$.ajax()而不是复杂的XMLHttpRequest代码。
.val()获取<select>/<option>值。
$('#foo')而不是document.getElementById().

还有一个非常重要的装饰点：正确的压痕！原始代码中的缩进到处都是。适当的缩进对于代码的可读性非常重要。

再看一遍代码后，您可能会更简单。由于您使用 POST 发送的数据值来自#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 ) {
            // ...
        }
    });
}

公平警告：当然这都是未经测试的代码！但它应该给你一个很好的起点。

javascript - ajax 在 IE8 及更高版本中不起作用

1 回答 1

Related

Reference