提交jquery后不要重新加载[重复]答案

【问题标题】：Don't reload after submit jquery [duplicate]提交jquery后不要重新加载[重复]
【发布时间】：2016-04-29 20:16:52
【问题描述】：

我在使用 jquery 实现“提交后不重新加载”时遇到问题。相同的 html 代码也用于名称。我发布了限制代码，但名称选择值相同。有人可以告诉我在这里实现吗？

jQuery

    <script type='text/javascript'>
$(document).ready(function() {

// process the form
$('form').submit(function(event) {

    var formData = {
        'name'              : $('input[id=select_name]').val(),
        'limit'             : $('input[id=select_limit]').val()
    };

    $.post('index.php?cat=fthome', function(formData) {

})
        .done(function(data) {
            console.log(data);
        });
    event.preventDefault();
});

});
    </script>

HTML

<input class="btn-select-input" id="select_limit" name="limit" type="hidden">
<span class="btn-select-value">All names</span>
<ul name="limit">
<li <?if ($_POST['limit']=="12") echo 'class="selected"'?>>12</li>
<li <?if ($_POST['limit']=="6") echo 'class="selected"'?>>6</li>
<li <?if ($_POST['limit']=="4") echo 'class="selected"'?>>4</li>
</ul>

<button id="js-trigger-overlay" type="submit" class="btn btn-success">Search</button>

【问题讨论】：

api.jquery.com/event.preventdefault
或者将 type="submit" 替换为 type="button"。
@SirajulHaq 我改了但没用
@user3307783 Siraj 的第一条评论不正确，因为default type attribute of button elements is submit，但是他的第二条评论应该可以。
无论有无类型提交，按钮都不起作用

标签： javascript php jquery html

【解决方案1】：

使用 jQuery event.preventDefault() 操作：

$('#js-trigger-overlay').click(function(event){ // add event parameter
    event.preventDefault();

    ...

这会阻止该操作执行任何其他操作，包括实际的提交操作，因为您已经通过发布操作处理了该操作。

(More Info)

【讨论】：