Question

注意：我使用的是jQuery 1.9

我不确定这是否是制作ajax请求的正确方法，并在处理过程中执行典型的加载/处理gif /动画并显示响应。

我在stackoverflow上使用一些问题和答案将代码拼凑在一起。

HTML：

<!-- start content -->
<div class='content'>

    <!-- start setup section -->
        <div class='photo-setup'>

            <div class='setup-head'>
                <div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name' value='Untitled'></div>
            </div>

            <div class='photo-section'>
                <img src="<?php echo 'tmp/' . $imgUpload->getFileName() . $imgUpload->getType() ?>" alt='photo'>
            </div>

            <div class='tag-section'>
                Photo Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
            </div>

            <div class='ajax-loading'>
                <img src='ajax-loader.gif'>
            </div>

            <div class='response'>
            </div>

            <div class='commit-section'>
                <a class='save' href='#'>Save</a><a class='cancel' href='upload.php'>Cancel</a>
            </div>

        </div>
    <!-- end setup section-->

</div>
<!-- end content -->

CSS：

img { border: none; }
input { padding: 0.30em; }

.photo-setup {
    width: 600px;
    height: auto;
    margin: 0 auto;
    font-weight: 200;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.setup-head {
    border-left: 1px solid #cacece;
    border-right: 1px solid #cacece;
    border-top: 1px solid #cacece;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1em;
    overflow: hidden;
}

.photo-name { float: left; }

.photo-section {
    border: 1px solid #cacece;
    text-align: center;
}

.tag-section {
    padding: 1em 0 1em 1em;
}

.tag-section input {
    width: 81%;
    display: inline-block;
}

.ajax-loading {
    text-align: center;
    margin: 1em;
    display: none;
}

.response {
    display: none;
    text-align: center;
}

.commit-section {
    text-align: center;
}

.commit-section a {
    margin-left: 1em;
}

jQuery的：

$(document).ready(function() {

    $('.save').on('click', function(e) {
        e.preventDefault();
        save();
    });

    $(document).ajaxStart(function() {
        $('.commit-section .save').hide();
        $('.ajax-loading').fadeIn();
    });

    $(document).ajaxComplete(function() {
        setTimeout(function() {
            $('.ajax-loading, .commit-section').hide();
            $('.response').fadeIn();
        }, 500);
    });

});

// collect all photo data and send to php for database storage
function save() {

    // regex to parse hashtags
    var regex = /[#]+[A-Za-z0-9-_]+/g;
    var name = $.trim($('.photo-name input').val());
    var tags = $.trim($('.tag-section input').val()).match(regex);
    var photo = $.trim($('.photo-section img').attr('src'));

    $.ajax({

        url: 'save_photo.php',
        method: 'POST',
        dataType: 'html',
        data: {
            title: name,
            hash_tags: tags,
            filename: photo
        }

    })
    .done(function(response) {
        $('.response').html(response);
    })
    .fail(function() {
        alert('Something went wrong!')
    });
}

Answer 1

我做过非常相似的事情，所以我会分享我对你问题中的信息做了什么。我将modal div放在</body>标记之前，因此没有其他样式会影响它。这与您的ajax-loading div相同。

HTML：

<div class='modal'>
  <div class='wait'>Please wait... <img src='/includes/img/loading29.gif' alt="Please wait"/><br />
    <span id='waitprogress'></span>
  </div>
</div>
</body>

CSS：

body.loading{
overflow: hidden;
}
body.loading>.modal{
display: block;
}
.modal{
display: none;
position: fixed;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
background: #000000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: .8;
z-index: 10000;
}
.wait{
position: fixed;
left: 40%;
top: 30%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}

jQuery：

var showLoader = true;
var $body = $('body');
$.ajaxSetup({global:true, cache: false});
$(document).ajaxStart(function(){
if(showLoader){
    $body.addClass("loading");
}
});
$(document).ajaxStop(function(){
if(showLoader){
    $body.removeClass("loading");
}
});

基本上，页面加载时不显示modal div，但是，当AJAX调用开始时，loading类将添加到body。当AJAX调用停止时，loading类被删除。希望这有助于指导您实施。

正确使用ajax响应，ajaxStart和ajaxComplete

1 个答案: