                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础(五)一Ajax应用与常用插件

可以运行得

<html xmlns="http://www.w3.org/1999/xhtml">    <head>        <title>使用ajaxStart()和ajaxStop()方法</title>        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        <link href="style.css" rel="stylesheet" type="text/css" />    </head>        <body>        <div id="divtest">            <div class="title">                <span class="fl">加载一段文字</span>                 <span class="fr">                    <input id="btnShow" type="button" value="加载" />                </span>            </div>            <ul>               <li id="divload">111</li>            </ul>        </div>                <script type="text/javascript">            $(function () {                                $(document).ajaxStart(function(){                    console.log($(this))                    $('#divload').html("正在请求数据...");                });                                $(document).ajaxStop(function(){                    console.log($(this))                    $('#divload').html("数据请求完成！");                });                                $("#btnShow").bind("click", function () {                    var $this = $(this);                    $.ajax({                        url: "https://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>

米咔咔

2020-06-27

源自：jQuery基础(五)一Ajax应用与常用插件 1-9

关注问题我要回答

688

操作

收起

1 回答

米咔咔提问者
2020-06-27

<html xmlns=" 
    <head>        
    <title>使用ajaxStart()和ajaxStop()方法</title>        
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        
    <link href="style.css" rel="stylesheet" type="text/css" />    
    </head>        
    <body>        
    <div id="divtest">            
    <div class="title">                
    <span class="fl">加载一段文字</span>                 
    <span class="fr">                    
    <input id="btnShow" type="button" value="加载" />                
    </span>            
    </div>            
    <ul>               
    <li id="divload">111</li>            
    </ul>        
    </div>                
    <script type="text/javascript">            
    $(function () {                               
    $(document).ajaxStart(function(){                    
    console.log($(this))                    
    $('#divload').html("正在请求数据...");                
    });                                
    $(document).ajaxStop(function(){                    
    console.log($(this))                    
    $('#divload').html("数据请求完成！");                
    });                                
    $("#btnShow").bind("click", function () {                   
     var $this = $(this);                   
      $.ajax({                       
       url: "https://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>