Jquery提交表单而不刷新

时间:2015-04-09 23:44:03

标签: javascript php jquery html ajax

我有一个运行PHP脚本来保存数据的javascript函数。

我遇到的问题是$ .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地图监听器):

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天。

1 个答案:

答案 0 :(得分:1)

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

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