1

我正在集成 mailchimp API，只是想通过在提交数据时显示加载动画器来使其更加用户友好。我已经让它显示了动画师，成功后，它用动画隐藏了 div。

但是，问题是如果脚本返回错误，例如电子邮件不正确，我也需要加载程序隐藏 - 它不是基于我到目前为止所尝试的。

关于我需要在以下脚本中为我的动画师插入 hide() 函数的位置有什么想法吗？

<script type="text/javascript">
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';var err_style = '';
try{
    err_style = mc_custom_error_style;
} catch(e){
    err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: ERROR_BGCOLOR none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: ERROR_COLOR;';
}
$(document).ready( function($) {
  var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
  var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
  options = { url: 'http://somethingorother.us2.list-manage.com/subscribe/post-json?u=a9cf617dfdf4f2eaoeuaoeub75b&id=4b3aoeu1e2a0&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                beforeSubmit: function(){
                    $('#mc_embed_signup .mc-field-group p').hide();
                    $('#subscribe_loading').fadeIn();
                    $('#mce_tmp_error_msg').remove();
                    $('.datefield','#mc_embed_signup').each(
                        function(){
                            var txt = 'filled';
                            var fields = new Array();
                            var i = 0;
                            $(':text', this).each(
                                function(){
                                    fields[i] = this;
                                    i++;
                                });
                            $(':hidden', this).each(
                                function(){
                                  if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
                                    this.value = '';
                              } else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
                                    this.value = '';
                  } else {
                                      this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
                                  }
                                });
                        });
                    return mce_validator.form();
                }, 
                success: mce_success_cb
            };
  $('#mc-embedded-subscribe-form').ajaxForm(options);

});
function mce_success_cb(resp){
    $('#subscribe_loading').hide();
    $('#mce-success-response').hide();
    $('#mce-error-response').hide();
    if (resp.result=="success"){
        $('#mce-'+resp.result+'-response').show();
        $('#mce-'+resp.result+'-response').html(resp.msg);
        $('#mc-embedded-subscribe-form').each(function(){
            this.reset();
      });
    } else {
        var index = -1;
        var msg;
        try {
            var parts = resp.msg.split(' - ',2);
            if (parts[1]==undefined){
                msg = resp.msg;
            } else {
                i = parseInt(parts[0]);
                if (i.toString() == parts[0]){
                    index = parts[0];
                    msg = parts[1];
                } else {
                    index = -1;
                    msg = resp.msg;
                }
            }
        } catch(e){
            index = -1;
            msg = resp.msg;
        }
        try{
            if (index== -1){
                $('#mce-'+resp.result+'-response').show();
                $('#mce-'+resp.result+'-response').html(msg);            
            } else {
                err_id = 'mce_tmp_error_msg';
                html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';

                var input_id = '#mc_embed_signup';
                var f = $(input_id);
                if (ftypes[index]=='address'){
                    input_id = '#mce-'+fnames[index]+'-addr1';
                    f = $(input_id).parent().parent().get(0);
                } else if (ftypes[index]=='date'){
                    input_id = '#mce-'+fnames[index]+'-month';
                    f = $(input_id).parent().parent().get(0);
                } else {
                    input_id = '#mce-'+fnames[index];
                    f = $().parent(input_id).get(0);
                }
                if (f){
                    $(f).append(html);
                    $(input_id).focus();
                } else {
                    $('#mce-'+resp.result+'-response').show();
                    $('#mce-'+resp.result+'-response').html(msg);
                }
            }
        } catch(e){
            $('#mce-'+resp.result+'-response').show();
            $('#mce-'+resp.result+'-response').html(msg);
        }
    }
}
</script>
4

2 回答 2

1

The ajaxForm plugin specifically says that you can make use of the options supported by .ajax()

Note that the Options Object can also be used to pass values to jQuery's $.ajax method. If you are familiar with the options supported by $.ajax you may use them in the Options Object passed to ajaxForm and ajaxSubmit.

So, the same way you make a function that executes on success, you can make one that executes on error. Take a look at the jQuery .ajax() page under:

error(XMLHttpRequest, textStatus, errorThrown):

A function to be called if the request fails. The function is passed three arguments: The XMLHttpRequest object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "notmodified" and "parsererror". This is an Ajax Event.

In your case, simply hide the image on error in the same manner you use on success... something like:

// ... code
options = {
    // ... code
    success: function(responseXML)
             { mce_success_cb(responseXML); }, // <== mce_... takes an argument
    error:   function() { $('#subscribe_loading').hide(); 
                          // any other stuff to do on error;
                         }
};
// ... code

You can use the arguments (XMLHttpRequest, textStatus, errorThrown) for the anonymous function to get information about the error and store it and / or display it.

If you want to handle the case where there is a successful AJAX response, but there is an error within the response, change mce_success_cb()... It looks like it's already set up to handle errors of this sort, so it's just a matter of adding the extra functionality you want:

// ...
function mce_success_cb(resp){
    $('#subscribe_loading').hide();
    $('#mce-success-response').hide();
    $('#mce-error-response').hide();
    if (resp.result=="success"){
        // ...
        // This stuff happens if resp.result == "success"
        // ...
    } else {
        // Add in the error handling functionality you want here
        var index = -1;
        var msg;
        //...

Some general problems

Take care to count all your parens and brackets, since it looks like you left some opened.

The beginning of your doc ready should look like:

$(document).ready( function() {  // <== No need to pass anything to this
    // This will all be executed when the document is ready.
    // ...
});             // <== Maker sure to close all parens and brackets!!!

Additionally, the success callback is going to give you multiple parameters, so you can't use a reference to a function for your success callback, it's gotta look more like this:

    success: function(responseXML)
    {
        mce_success_cb(responseXML);
    }

make sure you look at the AJAXForm plugin documentation describing the arguments passed to the success callback.

于 2010-09-22T02:29:41.127 回答
0

我没有阅读您的任何代码，但是您是否尝试过complete()该功能的方法jQuery.ajax？一旦加载数据，它就会调用该函数，而不管服务器发送的错误代码如何。

complete(XMLHttpRequest, textStatus)

请求完成时要调用的函数（在执行成功和错误回调之后）。该函数获得两个参数：XMLHttpRequest 对象和一个对请求状态进行分类的字符串（“成功”、“未修改”、“错误”、“超时”或“解析器错误”）。这是一个 Ajax 事件。

（来自http://api.jquery.com/jQuery.ajax/）

于 2010-09-23T03:07:38.600 回答