jQuery uses ajaxStart() and ajaxStop() methods-JS Tutorial-php.cn

jQuery uses ajaxStart() and ajaxStop() methods

巴扎黑

Release： 2017-07-03 10:52:21

Original

1536 people have browsed it

ajaxStart() and ajaxStop() methods are bound to Ajax events. The ajaxStart() method is used to trigger the function before the Ajax request is issued, and the ajaxStop() method is used to trigger the function after the Ajax request is completed. Their calling format is:

<strong>$(selector).ajaxStart(function())</strong>and<strong>$( selector).ajaxStop(function())</strong>

Among them, the brackets in both methods are bound functions, which are executed before sending the Ajax requestajaxStart() The function bound by the method. After the request is successful, the function bound by the ajaxStop () method is executed.

For example, before calling the ajax()methodrequesting server data, use animation to show that it is loading. When the request is successful, the The animation is automatically hidden, as shown in the following picture:

The effect displayed in the browser:

From the picture It can be seen that since the animated elements are bound using the ajaxStart() and ajaxStop() methods, when the Ajax request starts to be sent, the element is displayed, and when the request is completed, the animated element Automatically hide.

Note: This method is normal to use under 1.8.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title>使用ajaxStart()和ajaxStop()方法</title> 
        <script src="http://libs.baidu.com/
jquery
/1.8.2/jquery.js" type="text/
javascript
"></script> 
        <link href="style.css" rel="stylesheet" type="text/css" /> 
    </head> 
    
    <body> 
        <p id="ptest"> 
            <p class="title"> 
                <span class="fl">加载一段文字</span> 
                <span class="fr"> 
                    <input id="btnShow" type="button" value="加载" /> 
                </span> 
            </p> 
            <ul> 
               <li id="pload"></li> 
            </ul> 
        </p> 
        
        <script type="text/javascript"> 
            $(function () { 
                $("#pload").ajaxStart(function(){ 
                    $(this).html("正在请求数据..."); 
                }); 
                $("#pload").ajaxStop(function(){ 
                    $(this).html("数据请求完成！"); 
                }); 
                $("#btnShow").bind("click", function () { 
                    var $this = $(this); 
                    $.ajax({ 
                        url: "http://www.imooc.com/data/info_f.php", 
                        dataType: "json", 
                        success: function (data) { 
                            $this.attr("disabled", "true"); 
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>"); 
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>"); 
                        } 
                    }); 
                }) 
            }); 
        </script> 
    </body> 
</html>

Copy after login

The above is the detailed content of jQuery uses ajaxStart() and ajaxStop() methods. For more information, please follow other related articles on the PHP Chinese website!