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表格。当我执行它时，我得到警报但不是地图。如果我添加return false;在提交功能结束时，我得到警报，正确的地图，但是2个第一个表格仍然在这里，而我期望只有第三个。有帮助吗？ Tahnks

Answer 1

似乎你错过了AJAX调用完成时要执行的成功calback（或Promise接口）。使用延迟对象的近似代码可能如下所示：

$(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代码负责处理服务器调用和显示各种元素。

javascript上的$（Id）.submit（）

1 个答案: