jQuery utilise les méthodes ajaxStart() et ajaxStop()-js tutoriel-php.cn

jQuery utilise les méthodes ajaxStart() et ajaxStop()

巴扎黑

Libérer： 2017-07-03 10:52:21

original

1514 Les gens l'ont consulté

Les méthodes

ajaxStart() et ajaxStop() lient l'événement Ajax . La méthode ajaxStart() est utilisée pour déclencher la fonction avant l'émission de la requête Ajax, et la méthode ajaxStop() est utilisée pour déclencher la fonction une fois la requête Ajax terminée. Leur format d'appel est :

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

ajaxStart() Parmi eux, les crochets dans les deux méthodes sont des fonctions liées. Lors de l'envoi d'une requête Ajax, la fonction liée par la méthode

est exécutée. Une fois la requête réussie, la fonction liée par la méthode ajaxStop () est exécutée.

ajax()Par exemple, avant d'appeler la méthodepour demander des données au serveur, utilisez l'animation

pour montrer qu'elle est en cours de chargement. Lorsque la requête réussit, le. l'animation est automatiquement masquée, comme indiqué ci-dessous Affiché :

L'effet affiché dans le navigateur :

ajaxStart()Comme cela peut être vu de l'image, en raison de l'utilisation des méthodes ajaxStop() et

lient les éléments animés, donc lorsque vous commencez à envoyer une requête Ajax, l'élément est affiché, et lorsque la requête est terminée, l'élément animé est automatiquement masqué .

Remarque : Cette méthode est normale à utiliser sous 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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!