click点击请求$.ajax，怎么让他请求一次，关闭后才能再次请求-php教程-PHP中文网

首页

后端开发

php教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 06, 2016 pm 08:47 PM

ajaxphp

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

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

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

<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 id="登录花瓣">登录花瓣</h2>
        </div>
        <div class="body">
            <div class="login-connect">
                <h5 id="使用合作网站帐号登录">使用合作网站帐号登录</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 id="使用注册邮箱登录">使用注册邮箱登录</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>

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

 onclick="app.showSheet('login', {modal: true});return false;"

他这样的方式怎么写

<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是这样的

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

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

<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 id="登录花瓣">登录花瓣</h2>
        </div>
        <div class="body">
            <div class="login-connect">
                <h5 id="使用合作网站帐号登录">使用合作网站帐号登录</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 id="使用注册邮箱登录">使用注册邮箱登录</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>

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

 onclick="app.showSheet('login', {modal: true});return false;"

他这样的方式怎么写

<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，才给他赋值，然后每次按键的时候，都预先判断这个隐藏变量是否有值。

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());

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

继续使用PHP：耐力的原因Apr 19, 2025 am 12:23 AM

PHP仍然流行的原因是其易用性、灵活性和强大的生态系统。1)易用性和简单语法使其成为初学者的首选。2)与web开发紧密结合，处理HTTP请求和数据库交互出色。3)庞大的生态系统提供了丰富的工具和库。4)活跃的社区和开源性质使其适应新需求和技术趋势。

PHP和Python：探索他们的相似性和差异Apr 19, 2025 am 12:21 AM

PHP和Python都是高层次的编程语言，广泛应用于Web开发、数据处理和自动化任务。1.PHP常用于构建动态网站和内容管理系统，而Python常用于构建Web框架和数据科学。2.PHP使用echo输出内容，Python使用print。3.两者都支持面向对象编程，但语法和关键字不同。4.PHP支持弱类型转换，Python则更严格。5.PHP性能优化包括使用OPcache和异步编程，Python则使用cProfile和异步编程。

PHP和Python：解释了不同的范例Apr 18, 2025 am 12:26 AM

PHP主要是过程式编程，但也支持面向对象编程（OOP）；Python支持多种范式，包括OOP、函数式和过程式编程。PHP适合web开发，Python适用于多种应用，如数据分析和机器学习。

PHP和Python：深入了解他们的历史Apr 18, 2025 am 12:25 AM

PHP起源于1994年，由RasmusLerdorf开发，最初用于跟踪网站访问者，逐渐演变为服务器端脚本语言，广泛应用于网页开发。Python由GuidovanRossum于1980年代末开发，1991年首次发布，强调代码可读性和简洁性，适用于科学计算、数据分析等领域。

在PHP和Python之间进行选择：指南Apr 18, 2025 am 12:24 AM

PHP适合网页开发和快速原型开发，Python适用于数据科学和机器学习。1.PHP用于动态网页开发，语法简单，适合快速开发。2.Python语法简洁，适用于多领域，库生态系统强大。

PHP和框架：现代化语言Apr 18, 2025 am 12:14 AM

PHP在现代化进程中仍然重要，因为它支持大量网站和应用，并通过框架适应开发需求。1.PHP7提升了性能并引入了新功能。2.现代框架如Laravel、Symfony和CodeIgniter简化开发，提高代码质量。3.性能优化和最佳实践进一步提升应用效率。

PHP的影响：网络开发及以后Apr 18, 2025 am 12:10 AM

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

PHP类型提示如何起作用，包括标量类型，返回类型，联合类型和无效类型？Apr 17, 2025 am 12:25 AM

PHP类型提示提升代码质量和可读性。1)标量类型提示：自PHP7.0起，允许在函数参数中指定基本数据类型，如int、float等。2)返回类型提示：确保函数返回值类型的一致性。3)联合类型提示：自PHP8.0起，允许在函数参数或返回值中指定多个类型。4)可空类型提示：允许包含null值，处理可能返回空值的函数。

See all articles