$（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代碼需要對付的護理服務器調用和各種元素的顯示。