Question

这是我的问题，Ajax工作得很好，处理所有数据但由于某种原因，我现在忽略了它，它没有显示加载器和成功div。

我的 html 类似于

<form id="msform" action="#">
  <fieldset>
    <!-- some fields -->
    <input type="submit" Value="submit">
  </fieldset>
</form>

<div id="processing" class="row" style="display:none"></div>

<div id="apf-response" class="row" style="display:none"></div>

我的jQuery / AJAX看起来像：

$(document).ready(function(){
  $('#msform').submit(function(event){
    event.preventDefault();
    apfaddpost();
  })
})

function apfaddpost() {
  var fd = new FormData($('#msform')[0]);
  fd.append( "main_image", $('#main_image')[0].files[0]);
  fd.append( "action", 'apf_addpost');      

  //Append here your necessary data
  jQuery.ajax({
    type: 'POST',
    url: apfajax.ajaxurl,
    data: fd, 
    processData: false,
    contentType: false,
    beforeSend: function(){ 
      //here should be the issue. I'm hiding the form and showing the loader div
      $('#msform').hide();
      $('#processing').show();
    },
    success: function(data, textStatus, XMLHttpRequest) {
      //when it's completed hide loader and show success message
      $('#processing').hide();
      $('#apf-response').show();
      var id = '#success';
      jQuery(id).html('');
      jQuery(id).append(data);
      resetvalues($('#msform'));
    },
    error: function(MLHttpRequest, textStatus, errorThrown) {
      alert(errorThrown);
    }
  });
}

这是正确的方法吗？我做错了什么？

修改这可能是由event.preventDefault();或action="#"提供此问题吗？

解决

我已将jQuery代码更改为

function apfaddpost() {
    var fd = new FormData($('#msform')[0]);
    fd.append( "main_image", $('#main_image')[0].files[0]);
    fd.append( "action", 'apf_addpost');   

    $('#form-container').hide();
    $('#processing').show();
    var postProject = $.ajax({
        type: 'POST',
        url: apfajax.ajaxurl,
        data: fd, 
        processData: false,
        contentType: false,
    });

    postProject.done(function(data, textStatus, XMLHttpRequest) {
            $('#processing').hide();
            $('#apf-response').show();
            var id = '#success';
            jQuery(id).html('');
            jQuery(id).append(data);
            resetvalues($('#msform'));
    });

    postProject.fail(function(MLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
    });
}

有效！

Answer 1

如果您在表单标记中添加loader，它将正常运行

<form id="msform">
  <fieldset>
    <!-- some fields -->
    <input type="submit" Value="submit">
  </fieldset>

  <div id="processing" class="row" style="display:none"></div>
  <div id="apf-response" class="row" style="display:none"></div>
</form>

AJAX Post显示加载程序和消息将无法正常工作

1 个答案: