javascript - Jquery提交表单而不刷新

Question

我有一个 JavaScript 函数，可以运行 PHP 脚本来保存数据。

我遇到的问题是，在 $.ajax POST javascript 运行后，它会刷新我的页面，我需要避免这种情况。我读到使用“按钮”是问题所在，但无法让它与输入字段一起使用。

这是我的表单，其中包含一个示例字段:

<form id="SaveMarker" name="SaveMarker" method="POST" action="ajax-save.php">
    <label for="pName"><span>Location Name :</span>
    <input type="text" maxlength="75" placeholder="Enter Name" class="save-name" name="pName"></label>
</form>

还有一个“按钮”，实际上只是用户单击保存的文本链接。

<button name="save-marker" class="save-marker">Save Marker Details</button>

这是调用的 javascript(通过 Google map 监听器):

function save_marker(Marker, mName, mAddress, mType, replaceWin)
            {
                //Save new marker using jQuery Ajax
                var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
                var myData = {name : mName, address : mAddress, latlang : mLatLang, type : mType }; //post variables
                console.log(replaceWin);        
                $.ajax({
                  type: "POST",
                  url: "map_process.php",
                  data: myData,
                  success:function(data){
                        replaceWin.html(data); //replace info window with new html
                        Marker.setDraggable(false); //set marker to fixed
                        Marker.setIcon('http://www.sacgrid.com/img/pin_blue.png'); //replace icon
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert(thrownError); //throw any errors
                    }
                });
                return false;
            }`

我的表单、按钮元素或 JavaScript 是否有明显问题？先谢谢了，我们已经为此工作了 2 天。

Answer 1

尝试将类型按钮设置为 button ，这样<form>不会提交。

<button name="save-marker" type="button" class="save-marker">Save Marker Details</button>