表单提交后防止重定向到php文件答案

【问题标题】：prevent redirect to php file after form submit表单提交后防止重定向到php文件
【发布时间】：2013-10-30 11:32:15
【问题描述】：

在研究了太多小时之后，我终于决定自己发布这个问题，因为对别人有用的东西似乎对我不起作用。请记住，我对 ajax 和 jquery 还很陌生，但是由于我当前项目的最后期限，所以我没有时间完成所有工作。

我有以下html表单：

<div class="form">
    <form id="savePlacemarkForm" method="post" action="createPlacemark.php">
        <div>
            <input type="text" id="placemarkName" name="placemarkName" placeholder="Name:"/>
        </div>
        <div>
            <input type="text" id="placemarkAddress" name="placemarkAddress" placeholder="Adress:"/>
        </div>
        <div>
            <input type="text" id="placemarkTag" name="placemarkTag" placeholder="Tags:"/>
        </div>
        <div>
            <textarea id="placemarkDescription" name="placemarkDescription" placeholder="Description" rows="1" cols="1"></textarea>
        </div>
        <div>
            <input id="latitude" type="text" name="latitude"/>
        </div>
        <div>
            <input id="longtitude" type="text" name="longtitude"/>
        </div>
        <button class="md-close" id="savePlacemark" onclick="createPlacemark();"/>Save</button>
    </form>
    <button class="md-close">Cancel</button>
    <script src="my_script.js" type="text/javascript"></script>
</div>

如您所见，我将操作设置为 createPlacemark.php，它从这些字段中获取输入并将其保存到我的数据库中，效果很好！但是，由于这应该在不重定向或重新提交页面的情况下工作，这意味着 ajax！我包含了 my_script.js，它看起来像这样：

$("#savePlacemark").click( function() {
    $.post( $("#savePlacemarkForm").attr("action"), 
        $("#savePlacemarkForm :input").serializeArray();                     
    });
    clearInput();
});

$("#savePlacemarkForm").submit( function() {
    return false;   
});

function clearInput() {
    $("#savePlacemarkForm :input").each( function() {
        $(this).val('');
    });
}

如您所见，它为我做了这个帖子，它有效，但由于某种原因返回 false；似乎对我不起作用，因为我不断被重定向到前面提到的 php 文件。

任何帮助将不胜感激！谢谢！

【问题讨论】：

顺便说一句，您的each() 函数中不需要clearInput() 函数。写就够了：$('#savePlacemarkForm :input').val('');
在开始处理 AJAX 请求时尝试return json_encode($_POST)，然后在 Chrome 开发者工具中查看 NETWORK 选项卡。它将显示您的脚本在请求中收到的内容，这将帮助您识别问题。
抱歉，json_encode($_POST) 到底应该写在哪里？

标签： javascript php jquery ajax forms

【解决方案1】：

试试下面的。 .submit() 函数实际上触发了表单的提交。将其从脚本中删除，因为当您已经使用 $.post 发布值时不需要它。

$("#savePlacemark").click( function() {
 $.post( $("#savePlacemarkForm").attr("action"), 
         $("#savePlacemarkForm :input").serializeArray();                    
  });
  clearInput();
});

function clearInput() {
    $("#savePlacemarkForm :input").each( function() {
       $(this).val('');
    });
}

【讨论】：

同样的问题。当您删除此代码时，您会删除 return false，这（我在其他地方可以看到）应该阻止重定向。
createPlacemark() 是做什么的？由于页面上没有任何内容现在可以实际触发重定向。
createPlacemark.php 从表单中获取所有值并将它们保存在我的数据库中，它可以正常工作！因此，除了触发重定向之外的所有内容。
我的意思是javascript函数。您有一个 onclick="createPlacemark();" 以及该按钮上的点击事件。
哦，是的，createPlacemark 对 UI 进行了更新，基本上它在我的地图上您正在查看的位置放置了一个地标……但是，无论它是否存在，它都不会改变任何东西...

【解决方案2】：

试试这个

<button onclick="return createPlacemark();">Save</button>

它可以帮助你。

【讨论】：