$( “#ID”)ajaxStart(...)是一个Ajax请求期间调用两次
我有以下代码:
<script language="javascript">
function add(idautomobile,marque,model,couleur,type,puissance,GPS){
$("#notification").ajaxStart(function(){
$(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
});
$.ajax({
type: "POST",
url: "ajoutAutomobile",
data: {idautomobile1:idautomobile,marque: marque,model:model,couleur:couleur,type:type,puissance:puissance,GPS:GPS},
error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } ,
success: function(retour){
$("#notification").empty().append(retour).removeClass("error").addClass("success");
}
});
}
else{
$("#notification").empty().append("* Vérifiez les types de données").addClass("error");
}
}
function init(){
$("#GPSs").ajaxStart(function(){
$(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
});
$.ajax({
type:"GET",
url: "selectImei" ,
error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } ,
success: function(retour){
$("#GPSs").empty().append(retour)
}
});
}
</script>
,你可以看到这里,我有两个功能init()
和add(..)
: 的init()时,页面加载其COLLED:
<body onload="init()">
,并添加(..)按钮被点击时:
<input type="button" value="Ajouter Automobile" OnClick="add(idautomobile.value,marque.value,model.value,couleur.value,type.value,puissance.value,GPS.value)">
我由GIF(装载)在add(...)
功能的AJAX请求期间显示在<div id="notification">
:
$("#notification").ajaxStart(function(){
$(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
});
在init()函数是相同的(与来自数据库选项初始化<select>
):
$("#GPSs").ajaxStart(function(){
$(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
});
所有工作都很好,“ajax-loader.gif”被加载到<div id="GPSs">
中,然后在接收到响应时显示带选项的呈现选择。
的问题是,当我调用add(..)函数“AJAX-loader.gif”在<div id="GPSs">
再次加载图像...
最初加载页面时,该功能init()
被称为:
当AJAX请求完成时,选择从数据库检索显示,然后进入<div id="GPSs">
:
当我点击该按钮时,图像的问题再次显示:
有没有解决方案呢?
的完整代码:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Ajout automobile</title>
<%@include file="includes/head.html" %>
<script language="javascript">
function add(idautomobile,marque,model,couleur,type,puissance,GPS){
$("#notification").ajaxStart(function(){
$(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
});
select = document.getElementById("type");
type = select.options[select.selectedIndex].value;
select2 = document.getElementById("GPS");
GPS = select2.options[select2.selectedIndex].value;
Vidautomobile=document.getElementById('idautomobile').validity.valid;
Vmarque=document.getElementById('marque').validity.valid;
Vmodel=document.getElementById('model').validity.valid;
Vcouleur=document.getElementById('couleur').validity.valid;
Vtype=document.getElementById('type').validity.valid;
Vpuissance=document.getElementById('puissance').validity.valid;
VGPS=document.getElementById('GPS').validity.valid;
if(Vidautomobile&&Vmarque&&Vmodel&&Vcouleur&&Vtype&&Vpuissance&&VGPS)
{
$.ajax({
type: "POST",
url: "ajoutAutomobile",
data: {idautomobile1:idautomobile,marque: marque,model:model,couleur:couleur,type:type,puissance:puissance,GPS:GPS},
error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } ,
success: function(retour){
$("#notification").empty().append(retour).removeClass("error").addClass("success");
}
});
}
else{
$("#notification").empty().append("* Vérifiez les types de données").addClass("error");
}
}
function init(){
$("#GPSs").ajaxStart(function(){
$(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
});
$.ajax({
type:"GET",
url: "selectImei" ,
error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } ,
success: function(retour){
$("#GPSs").empty().append(retour)
}
});
}
</script>
</head>
<body onload="init()">
<%@include file="includes/header.html" %>
<div id="notification"><!-- zone de notification -->
</div>
<!-- Le contenu -->
<div id="content">
<form name="f">
<table>
<tr>
<td><b><i>Immatricule</i></b> </td>
<td><input type="text" pattern="\w{5,30}" required placeholder="Immaticule" name="idautomobile" id="idautomobile"></td>
</tr>
<tr>
<td> <b><i>Marque</i></b></td>
<td> <input type="text" required placeholder="Marque" name="marque" id="marque"></td>
</tr>
<tr>
<td><b><i>Model</i></b> </td>
<td><input type="text" pattern="\w{3,30}" required placeholder="Model" name="model" id="model"></td>
</tr>
<tr>
<td><b><i>Couleur</i></b> </td>
<td> <input type="text" pattern="\w{3,30}" required placeholder="Couleur" name="couleur" id="couleur"></td>
</tr>
<tr>
<td> <b><i>type</i></b> </td>
<td><select name="type" id="type">
<option value="voiture" >Voiture </option>
<option value="camion" >Camion </option>
</select> </td>
</tr>
<tr>
<td><b><i>Puissance</i></b> </td>
<td> <input type="text" pattern="\d{1}" required placeholder="Puissance" name="puissance" id="puissance"></td>
</tr>
<tr>
<td><b><i>GPS</i></b></td>
<td id="GPSs"></td>
</tr>
</table>
<input type="button" value="Ajouter Automobile" OnClick="add(idautomobile.value,marque.value,model.value,couleur.value,type.value,puissance.value,GPS.value)">
</form>
</div>
<!-- iclure le footer-->
<%@include file="includes/footer.html" %>
<!-- fin iclure-->
</body>
</html>
你打电话.ajaxStart()
的两倍,因此它是有道理的,你会得到你的时候启动第二AJAX调用(假设没有已经在运行)都被调用。什么你需要做的是,一旦最初的AJAX调用已完成,解除绑定连接到#GPSs
元素ajaxStart
事件处理程序,就像这样:
$('#GPSs').off('ajaxStart');
使用的.off()
功能,这是在jQuery的1.7推出。如果您使用的是早期版本,请改用.unbind()
。
工程好哥们!谢谢。 – 2012-04-18 17:28:04
如果您发布您的完整代码,我们可以为您提供帮助。但就目前而言,你已经包含了一部分“if”语句。 – Tim 2012-04-18 17:11:54
完整代码加入.. – 2012-04-18 17:16:53