html - 使用Ajax但页面仍然刷新

Question

我在搜索表单上有以下内容，但 Ajax 部分似乎仍在刷新整个页面。我的搜索结果返回得很好，但是，我希望它不要每次都刷新页面。

showLoader() 在刷新之前出现，但结果在刷新之后显示。

我的成功是否指向了错误的DIV？或者提交发生在错误的时间？我迷路了

    $('.em-events-search-form').submit(function(){
        showLoader()
        if( this.search.value=='<?php echo $s_default; ?>'){
            this.search.value = '';
        }           
        if( $('#em-wrapper .em-events-list').length == 1 ){
            $(this).ajaxSubmit({
                url : EM.ajaxurl,
                data : {
                    _wpnonce : '<?php echo wp_create_nonce('search_states'); ?>',
                    return_html : true
                },
                success : function(responseText) {
                    $('#em-wrapper .em-events-list').replaceWith(responseText);
                }
            });
        } 
    });

Answer 1

您需要阻止执行表单的默认操作:

$('.em-events-search-form').submit(function(e){
    showLoader()
    if( this.search.value=='<?php echo $s_default; ?>'){
        this.search.value = '';
    }           
    if( $('#em-wrapper .em-events-list').length == 1 ){
        $(this).ajaxSubmit({
            url : EM.ajaxurl,
            data : {
                _wpnonce : '<?php echo wp_create_nonce('search_states'); ?>',
                return_html : true
            },
            success : function(responseText) {
                $('#em-wrapper .em-events-list').replaceWith(responseText);
            }
        });
        e.preventDefault();
    }
});

两个细微的变化是，e(事件)参数现在被传递到函数中，一旦您设置了 AJAX 调用，您就可以阻止默认操作的执行。