ajax在IE8及以上版本中不工作
ajax not working in IE8 and above
我已经使用这个ajax调用填充值，它在所有其他浏览器中工作很好，但不是在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);
}
}
}
}
这是我的JSP页面，我从这里调用Ajax函数
<!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>
甚至不要尝试调试那些makedate()和makedateStateHandler()函数。他们只是太乱了。如果这段代码是你写的，请原谅我说了这么难听的话。如果是别人写的，去踢他们!: -)
既然你已经在使用jQuery了，让我们使用 it:
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数据参数，而不是像POST请求的通常方式那样发送URL。但是，大多数服务器代码应该接受任意一种格式的数据。
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 ) {
// ...
}
});
}
公平警告:当然这是所有未经测试的代码!但它应该给你一个很好的起点。
相关文章：
- Chrome没有加载最新版本的web工作程序脚本(运行缓存版本）
- 如何使用多个jquery版本，以便Responsive Slides.js工作
- 安卓版本的代码不像桌面互联网浏览器那样工作
- 如何包含多个 jquery 版本以使多个 jquery 插件工作
- IE版本检查停止工作
- fadeIn动画无法在IE中工作(所有版本）
- 如何让原生 WebSocket 在 Android 4.03 及更高版本中工作
- ng-click在第一次点击后停止工作，但仅在以后的Angular版本中
- 正则表达式无法正常工作以识别 IE 版本
- 没有 jQuery 在 IE 版本 6 - 11 中工作
- 节点.js版本已更改，脚本不再工作
- 将 jQuery 库升级到版本 1.10 后，代码停止工作
- 版本号比较如何在 JavaScript 中正常工作
- 在JavaScript中检索innerHTML的输入值;在IE 9及以上版本中无法正常工作
- 窗口滚动在mozila最新版本中无法正常工作
- 获取.click(）以在不同版本的Firefox中工作
- 不工作以前的页面功能在android旧版本像果冻豆，kitkat android，它的工作只有棒棒糖版本
- 当/patt/版本工作时，为什么RegExp版本不工作?(Javascript）
- senamion无法正常工作，浏览器版本出现错误
- createElement不能在ie8或更低版本中工作
