$（Id）的.submit（）JavaScript的

Question

我有下面的代码有问题： 这里的JavaScript的

$(document).ready(function(){ 

$("#VisualiserCarte").submit(function(){ 

    $.post("store.php",{longitudes:longitudes,latitudes:latitudes}); 
    alert('ok'); 
     var mapOptions = { 
      zoom: 13, 
      // Center the map on Chicago, USA. 
      center: new google.maps.LatLng(tableauPoints[0].lat(),tableauPoints[0].lng()) 
     }; 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     var flightPath = new google.maps.Polyline({ 
      path: tableauPoints, 
      geodesic: true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
      }); 
     flightPath.setMap(map); 


}); 

}); 

这里是PHP

<script src="google_map.js"></script> 
    <?php 
    $DisplayForm= True; 
    if (isset($_POST['vue'])){ 
     $DisplayForm= False;  
    } 
    if ($DisplayForm){ 

    ?> 
    <form method="post" id="VisualiserCarte"> 
     <input type="submit" name="vue" value="visualiser la carte" > 
    </form> 
    <form action="store.php" method="post" id="SoumettreCarte" > 
     <input type="submit" name="submit" value="soumettre la carte" > 
    </form> 
    <?php 
    } 
    else 
    { 
    ?> 
    <form method="post" id="RéinitialiserCarte" > 
     <input type="submit" value="réinitialiser" value="réinitialiser la carte" > 
    </form> 

    <?php 
    } 
    ?> 

如果我在提交点击对于“VisualiserCarte”形式，我期望它能够提醒您，使用折线绘制地图，并在地图下方获取RéinitialiserCarte形式。当我执行它时，我得到警报但不是地图 。 如果我添加返回false;在提交函数结束时，我得到了警报，正确的地图，但是2个第一个表单仍然在这里，而我期望只有第三个表单。 有什么帮助吗？ Tahnks

Answer 1

看起来你错过了在AJAX调用完成时执行的成功回调（或Promise接口）。 它采用递延对象的aproximate代码可以像下面这样：

$(document).ready(function(){ 

    // Send data to server and store it 
    $("#SoumettreCarte").submit(function(ev) { 

     ev.preventDefault(); // Prevent submit; Let AJAX call deal with submit 

     $.post("store.php", {longitudes: longitudes,latitudes: latitudes}) 
     .done(function (response) { 
      alert('Soumettre Carte - ok'); 
     }); 

    }); 

    $("#VisualiserCarte").submit(function(ev){ 

     ev.preventDefault(); // Prevent submit 

     // Hide forms 
     $('#VisualiserCarte').hide(); 
     $('#SoumettreCarte').hide(); 

     // Display last form 
     $('#ReinitialiserCarte').show(); 

     var mapOptions = { 
      zoom: 13, 
      // Center the map on Chicago, USA. 
      center: new google.maps.LatLng(tableauPoints[0].lat(),tableauPoints[0].lng()) 
     }; 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     var flightPath = new google.maps.Polyline({ 
      path: tableauPoints, 
      geodesic: true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
      }); 
     flightPath.setMap(map); 

    }); 

    $('#ReinitialiserCarte').submit(function(ev) { 
     ev.preventDefault(); // Prevent submit 

     $('#VisualiserCarte').show(); 
     $('#SoumettreCarte').show(); 
     $('#ReinitialiserCarte').hide(); 
    }); 

}); 

而且PHP代码可以写成：

<form method="post" id="VisualiserCarte"> 
    <input type="submit" name="vue" value="visualiser la carte" > 
</form> 
<form action="store.php" method="post" id="SoumettreCarte" > 
    <input type="submit" name="submit" value="soumettre la carte" > 
</form> 

<div id="map-canvas"></div> 

<form method="post" id="ReinitialiserCarte" style="display: none;"> 
    <input type="submit" value="réinitialiser" value="réinitialiser la carte" > 
</form> 

正如你所看到的jQuery代码需要对付的护理服务器调用和各种元素的显示。