search

Home >Backend Development >PHP Tutorial >click点击请求$.ajax，怎么让他请求一次，关闭后才能再次请求

click点击请求$.ajax，怎么让他请求一次，关闭后才能再次请求

WBOY
WBOYOriginal
2016-06-06 20:47:001006browse

仿的是花瓣登录效果，他默认HTML是这样的

<code class="lang-html"><a onclick="app.showSheet('login', {modal: true});return false;" href="#" class="login btn wbtn"><span class="text"> 登录</span></a>
</code>

点击登录，会在#page里面加上登录框，

<code class="lang-html"><div class="sheet-overlay" style="opacity: 1;"></div>
<div id="sheet" class="destroy" style="display: block; top: 72px;">
    <div id="sheet_login" class="sheet">
        <div class="head">
            <h2>登录花瓣</h2>
        </div>
        <div class="body">
            <div class="login-connect">
                <h5>使用合作网站帐号登录</h5>
                <div class="connections clearfix">
<a href="/oauth/weibo/instant_login/" onclick="return false;" class="weibo login-button">新浪微博</a><a href="/oauth/douban/instant_login/" onclick="return false;" class="douban login-button">豆瓣</a><a href="/oauth/renren/instant_login/" onclick="return false;" class="renren login-button">人人网</a><a href="/oauth/qzone/instant_login/" onclick="return false;" class="qzone login-button">QQ</a>
</div>
                <p class="less">未注册过花瓣也可以直接登录哦</p>
            </div>
            <div class="login-form">
                <h5>使用注册邮箱登录</h5>
                <form id="auth_form" action="https://huaban.com/auth/" method="post" class="Form FancyForm AuthForm">
                    <ul>
                        <li>
                            <div class="input email">
                                <input id="login_email" name="email" type="text" value="">
                                <label>花瓣注册邮箱</label>
                                <span class="fff"></span>
</div>
                        </li>
                        <li>
                            <div class="input password">
                                <input id="login_password" name="password" type="password">
                                <label>密码</label>
                                <span class="fff"></span>
</div>
                        </li>
                    </ul>
                    <div class="non_inputs">
<a id="login_btn" href="#" onclick="return false;" class="btn btn18 rbtn"><strong> 登录</strong><span></span></a><a id="reset_password" href="#" onclick="return false;" class="less fr">忘记了密码？</a><a id="back_to_login" href="#" style="display: none;" onclick="return false;" class="less fr">哦，又想起来了!</a>
</div>
                </form>
                <div id="reset_msg" style="display: none;" class="success"></div>
            </div>
            <div class="clear"></div>
        </div>
        <a href="#" title="关闭" onclick="app.hideSheet();return false;" class="close"></a>
</div>
</div>
</code>

点击关闭后，会删除这个登录框。而且出来的时候是向下拉，关闭的时候是向上收，我把上面代码放在/include/pop-login.php里面

<code class="lang-javascript"> onclick="app.showSheet('login', {modal: true});return false;"
</code>

他这样的方式怎么写

<code>$('.login').on('click',function(){
    $.ajax({
        async: false,
        url: "/include/pop-login.php",
        cache: false,
        success: function(html){
            $("#page").append(html);
        }
    });
});
$('#sheet_login .close').live('click',function(){
    $('.sheet-overlay').remove();
    $('#sheet').remove();
});
</code>

回复内容：

仿的是花瓣登录效果，他默认HTML是这样的

<code class="lang-html"><a onclick="app.showSheet('login', {modal: true});return false;" href="#" class="login btn wbtn"><span class="text"> 登录</span></a>
</code>

点击登录，会在#page里面加上登录框，

<code class="lang-html"><div class="sheet-overlay" style="opacity: 1;"></div>
<div id="sheet" class="destroy" style="display: block; top: 72px;">
    <div id="sheet_login" class="sheet">
        <div class="head">
            <h2>登录花瓣</h2>
        </div>
        <div class="body">
            <div class="login-connect">
                <h5>使用合作网站帐号登录</h5>
                <div class="connections clearfix">
<a href="/oauth/weibo/instant_login/" onclick="return false;" class="weibo login-button">新浪微博</a><a href="/oauth/douban/instant_login/" onclick="return false;" class="douban login-button">豆瓣</a><a href="/oauth/renren/instant_login/" onclick="return false;" class="renren login-button">人人网</a><a href="/oauth/qzone/instant_login/" onclick="return false;" class="qzone login-button">QQ</a>
</div>
                <p class="less">未注册过花瓣也可以直接登录哦</p>
            </div>
            <div class="login-form">
                <h5>使用注册邮箱登录</h5>
                <form id="auth_form" action="https://huaban.com/auth/" method="post" class="Form FancyForm AuthForm">
                    <ul>
                        <li>
                            <div class="input email">
                                <input id="login_email" name="email" type="text" value="">
                                <label>花瓣注册邮箱</label>
                                <span class="fff"></span>
</div>
                        </li>
                        <li>
                            <div class="input password">
                                <input id="login_password" name="password" type="password">
                                <label>密码</label>
                                <span class="fff"></span>
</div>
                        </li>
                    </ul>
                    <div class="non_inputs">
<a id="login_btn" href="#" onclick="return false;" class="btn btn18 rbtn"><strong> 登录</strong><span></span></a><a id="reset_password" href="#" onclick="return false;" class="less fr">忘记了密码？</a><a id="back_to_login" href="#" style="display: none;" onclick="return false;" class="less fr">哦，又想起来了!</a>
</div>
                </form>
                <div id="reset_msg" style="display: none;" class="success"></div>
            </div>
            <div class="clear"></div>
        </div>
        <a href="#" title="关闭" onclick="app.hideSheet();return false;" class="close"></a>
</div>
</div>
</code>

点击关闭后，会删除这个登录框。而且出来的时候是向下拉，关闭的时候是向上收，我把上面代码放在/include/pop-login.php里面

<code class="lang-javascript"> onclick="app.showSheet('login', {modal: true});return false;"
</code>

他这样的方式怎么写

<code>$('.login').on('click',function(){
    $.ajax({
        async: false,
        url: "/include/pop-login.php",
        cache: false,
        success: function(html){
            $("#page").append(html);
        }
    });
});
$('#sheet_login .close').live('click',function(){
    $('.sheet-overlay').remove();
    $('#sheet').remove();
});
</code>

大概这种感觉？

<code>function on_click_login(){
    $.ajax({
        async: false,
        url: "/include/pop-login.php",
        cache: false,
        success: function(html){
            $("#page").append(html);
        },
        error: function(){
            $('.login').one('click',on_click_login);
        }
    });
}

$('.login').one('click',on_click_login);
$('#page').on('click','#sheet_login .close',function(){
    $('.sheet-overlay').remove();
    $('#sheet').remove();
    $('.login').one('click',on_click_login);
});
</code>

PS，因为不喜欢live所以随手改掉了……

也碰到过楼主的这样的问题，那个时候也没有什么好方法解决。当时用了一个很丑陋的方法解决掉的。
当时在页面上写了一个隐藏变量，每次ajax触发之前，都清零，ajax执行成功之后，延迟100ms，才给他赋值，然后每次按键的时候，都预先判断这个隐藏变量是否有值。

<code class="lang-javascript">var popLogin = {
    isLock: false,
    init: function() {
        if (popLogin.isLock) {
            //TODO...
            return false;
        }
        $.ajax({
            url: "/include/pop-login.php",
            cache: false,
            success: function(html){
                $("#page").append(html);
            },
            complete: function() {
                popLogin.isLock = false;
            }
        });
    }
};

$('.login').on('click', popLogin.init());
</code>

难道不是在click时disable掉按钮，然后在ajax结束的时候enable吗……

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：mysql - 多用户同时请求一个PHP文件有可能得到相同的返回值吗?Next article：unix-时间戳 - php生成javascript风格时间戳

Related articles

See more