注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

融智技术学院

融智技术学院163分站,为广大好友提供更多的帮助

 
 
 

日志

 
 

【JavaScript每日一问】单击事件充当双击事件  

2014-04-30 13:18:17|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Q

我使用了ajax去提交登陆表单,而且不需要刷新页面。我添加了一个函数去查看是否数据会返回'reeor'(在用户输入不正确的email或密码的时候返回的参数)。如果没有返回‘error’,用户就会登陆并且会在2秒内转移页面。

问题是我的按钮的效果是个双击按钮,而且我也不知道为什么。

这是JS文件内容:

  • $(function() {
        $(
    "#goLogin").click(function() {
            $.ajax({
                type:
    "POST",
                url:
    "db-requests/db-login.php",
                data: $(
    "#loginForm").serialize(),
                success:
    function(data,textStatus,jqXHR){   finishLogin(data,textStatus,jqXHR); }
            });
        });
    });
  • function finishLogin( data , textStatus ,jqXHR ) {
  • if ( data == "error" ) {
            $(
    '.errorMsg').fadeIn(500).hide();
            $(
    '.succesMsg').fadeOut(300).hide();
        }
    else {
            $(
    '.succesMsg').fadeIn(500).show();
            $(
    '.errorMsg').fadeOut(300).hide();
            setTimeout(
    "location.href = 'protected.php';",2000);
        }
  • }

我已经试过将其放在document_ready标签之间,但是仍然不正常。

部分HTML代码:

  • <div class="login form">
  • <div class="login-header">Please Login</div>
  • <form method="post" id="loginForm" name="form">
  • <label for="email" class="short">Email*</label>
                   
    <input type="text" name="email" id="email" class="required" placeholder="" />
  • <label for="password" class="short">Password *</label>
                   
    <input type="password" name="password" id="password" class="required" placeholder="" maxlength="15" />
  • </form>
  • <div id="login-functions">
                   
    <div class="loginbtn-container">
                       
    <input type="submit" id="goLogin" name="goLogin" class="button green" value="Login" />
                   
    </div>
  • <div class="login form actions">
                   
    <p class="register account">Register an account</p>
                   
    <p class="request password">Lost your password?</p>
                   
    </div>
              
    </div>
  • </div>
  • <div class="errorMsg">Incorrect. Please recheck your details</div>
           
    <div class="succesMsg"><b>You've been logged in!</b> Please wait while we

A:

  • $('.errorMsg').fadeIn(500).hide();
    $(
    '.succesMsg').fadeOut(300).hide();

你是要隐藏着两个吗?我认为click是对的,虽然你的观念上是submit

拿掉在表单里的submit,然后用preventDefault()函数防止正常的表单提交

  • $("#goLogin").submit(function(e) {
        e.preventDefault();
        $.ajax({
            type:
    "POST",
            url:
    "db-requests/db-login.php",
            data: $(
    "#loginForm").serialize(),
            success:
    function(data,textStatus,jqXHR){   finishLogin(data,textStatus,jqXHR); }
        });
  • });

温馨提示:您的支持与理解,是我们工作最大的动力。如果您是从网上购买的图书,请在对应的网店,给予本书一个好评,我们将衷心感谢!!!
以下是《
HTML+CSS网页设计详对应的购书评论地址:
当当网:http://product.dangdang.com/23423206.html
亚马逊:http://www.amazon.cn/dp/B00IICLL8W
京东网:http://item.jd.com/11406922.html

  评论这张
 
阅读(6)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017