Question

我是jquery的新手，我想要一个带有Ajax post的加载图像。我做了以下

我的表格如下 -

 <form id="ajaxquery" method="post" action="">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">


            <td>
                <label for="field">Gender:</label>
                <input type="radio" name="gender" value="0" > GROOM
                <input type="radio" name="gender" value="1" > BRIDE 
            </td>
             <td>
                <label for="field">Select country:</label>
                <select name="Countryname" id="country">
                    <option>select country</option>
                <?php foreach ($country as $countryname): ?>
                <option value="<?php echo $countryname['country_id'];?>"><?php echo $countryname['country_name']; ?></option>
                <?php endforeach; ?>
                    </select>
            </td>
            <td>
                <input type="submit" name="submit" value="Submit" />
            </td>



    </form>

加载图片div

 <div id="overlay"><div><img src="../images/loader.gif" width="64px" height="64px"/></div></div>

脚本

$("#ajaxquery").on( "submit" , function(){

    // Intercept the form submission
    var formdata = $(this).serialize(); // Serialize all form data

    // Post data to your PHP processing script
    $.post( "", formdata, function( data ) { 
        **beforeSend: function(){$("#overlay").show();},**
        // Act upon the data returned, setting it to #success <div>
        history.pushState(null, "", "testdup.php");
         $("#success").empty();
        $("#success").html ( data );
    });

    return false; // Prevent the form from actually submitting
});

$('.pagination').on( "click" , function(){

         $("#success").empty();


});

</script>

当我提交表单时，将显示加载图像，直到数据返回。但现在加载图像总是显示。我对jquery很新。请帮帮我。

Answer 1

jQuery为已完成的ajax请求提供事件处理程序，可以将其链接到实际的请求本身。作为参数提交给帖子的函数是第一个成功处理程序。

$.post( "", formdata, function(data){
    //successhandler
}).done(function(data){
    //successhandler
}).fail(function(data){
    //failure handler
}).always(function(){
    //This is called regardless if the request was a success or not
});

您的问题可以通过always处理程序解决，因为您希望加载指示符隐藏请求是否成功。

$("#overlay").show();
$.post( "", formdata, function( data ) { 
    // Act upon the data returned, setting it to #success <div>
    history.pushState(null, "", "testdup.php");
     $("#success").empty();
    $("#success").html ( data );
}).always(function(){
    $("#overlay").hide();
});

请注意，您应该使用fail处理程序向您的用户显示出现问题。

Answer 2

试试这个

 <div id="overlay"><div><img src="../images/loader.gif" width="64px" height="64px"/></div></div>

到

 <div id="overlay" style='display:none;'><div><img src="../images/loader.gif" width="64px" height="64px"/></div></div>






$("#overlay").show();
$.post( "", formdata, function( data ) { 

    history.pushState(null, "", "testdup.php");

    $("#success").empty();
    $("#success").html ( data );
}).always(function(){
     $("#overlay").hide();
});

加载图片php jquery的问题

2 个答案: