Question

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

刷新前会显示

showLoader()，但刷新后会显示结果。

我是否只是在错误的DIV中指出了success？或者提交是在错误的时间发生的？我迷路了

    $('.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调用，就会阻止执行默认操作。

Answer 2

我可以建议使用按钮上的click事件处理程序而不是使用submit吗？

另外，e.cancel（）;可以做到这一点，但上述陈述是万无一失的。

Answer 3

尝试

$("..em-events-search-form").live('click', function () {
  showLoader()
if( this.search.value=='<?php echo $s_default; ?>'){
    this.search.value = '';
}           
if( $('#em-wrapper .em-events-list').length == 1 ){

    $.ajax({
      type: "POST"
      url: EM.ajaxurl,
      data: {
            _wpnonce : '<?php echo wp_create_nonce('search_states'); ?>',
            return_html : true
        },
      dataType: 'json',
      success: function (response){
         $('#em-wrapper .em-events-list').replaceWith(response._wpnonce);
      }


   })
  }
});

使用Ajax但页面仍然刷新

3 个答案: