Javascript 使用Google Map Api保存标记-重定向到.php页面

我有一个网站，它使用GoogleMapsAPI向php数据库添加和保存标记。将新标记添加到地图时，将打开一个信息窗口，其中显示一个表单，用于提交数据并将其保存到数据库

表格为：

var WinnerForm = '<p><div class="winner-form">'+
            '<form action="addwinner.php" method="POST" name="SaveMarker" id="SaveMarker">'+
            '<label for="w_name"><span>Winner Name :</span><input type="text" name="w_name" class="save-name" placeholder="Name of Winner" maxlength="40"/></label>'+
            '<label for="w_address"><span>Address :</span><textarea name="w_address" class="save-address" placeholder="Address of Winner" maxlength="150"></textarea></label>'+
            '<label for="w_description"><span>Description :</span><textarea name="w_description" class="save-desc" placeholder="Dewscription of Award" maxlength="150"></textarea></label>'+

            '<button name="save-winner" class="save-winner btn btn-info btn-sm style="float:left">Save Winner<br>' +
            '<button name="cancel-winner" class="cancel-winner btn btn-warning btn-sm" style="float:right">Cancel winner</button>' +
            '</div>';
            //Drop a new Marker with the Winner Form
            new_winner_marker(event.latLng, 'New Winner', WinnerForm, '', '', '', true, true, true, "static/assets/new_winner_icon.png");

使用ajax将保存数据的函数发送到php脚本：

function save_winner(Marker, wName, wAdd, wDesc, wMonth, wYear, replaceWin)
{
    //Save new marker using jQuery Ajax
    var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
    var myData = {name : wName, address : wAdd, about : wDesc, latlang : mLatLang, month : wMonth, year: wYear }; //post variables

    $.ajax({
      type: "POST",
      url: "addwinner.php",
      data: myData,
      success:function(data){
            replaceWin.html(data); //replace info window with new html
            $("#winner-saved").slideDown();
            Marker.setDraggable(false); //set marker to fixed

            infowindow.setContent('Winner Added');
            setTimeout(function () {infowindow.close();}, 3000); // Close info window after 3 seconds
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError); //throw any errors
        }
    });
}

---

因此，表单上有一个操作url和一个方法。然后发出一个ajax请求，在其中指定url和方法，这可能与表单标记上的完全不同

ajax请求的发生不会阻止原始表单提交的发生

在submit按钮事件处理程序上，执行

event.preventDefault（）

和/或

return false

以停止表单提交（但仍允许使用ajax帖子）

---

另外，我建议从表单标签中删除action和method属性，以避免可能的混淆。

谢谢。使用

event.preventDefault（）

帮助解决了这个问题，但我在

$（“#myModal winner”）.modal（'show，'100）中也出现了一个错误-节目结束后，括号中有一个逗号，因此必须更改为：

$("#myModal-winner").modal('show', 100);

function save_winner(Marker, wName, wAdd, wDesc, wMonth, wYear, replaceWin)
{
    //Save new marker using jQuery Ajax
    var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
    var myData = {name : wName, address : wAdd, about : wDesc, latlang : mLatLang, month : wMonth, year: wYear }; //post variables

    $.ajax({
      type: "POST",
      url: "addwinner.php",
      data: myData,
      success:function(data){
            replaceWin.html(data); //replace info window with new html
            $("#winner-saved").slideDown();
            Marker.setDraggable(false); //set marker to fixed

            infowindow.setContent('Winner Added');
            setTimeout(function () {infowindow.close();}, 3000); // Close info window after 3 seconds
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError); //throw any errors
        }
    });
}

$("#myModal-winner").modal('show', 100);