FZUMRWANG
孤独时代的老狗
采纳率50%
2020-01-01 13:08

Web开发-登录界面点击登录按钮没反应

login.html

<!DOCTYPE html>
<html>
<head>
  <title>登录</title>
  <link rel="stylesheet" type="text/css" href="css/login.css">
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/frame.js"></script>
  <meta charset="UTF-8">
</head>
<body>
  <div class="contain">
    <div class="logintop">
    </div>

    <div class="loginbody">
      <div class="logindiv">
        <form id="loginform" name="loginform" class="loginform">
          <ul>
            <li>
              <input name="username" type="text" class="loginuser" value="" placeholder="输入账号" maxlength="100" id="username" errormsg="密码长度在6-16位之间"/>
            </li>
            <li>
              <input name="password" type="password" class="loginpwd" value="" placeholder="输入密码" id="password" errormsg="密码长度在6-16位之间"/>
            </li>
            <li>
              <input name="btnRtSubmit" type="button" class="loginbtn"  id="btnRtSubmit" value="登录"/>
            </li>
          </ul>
        </form>
      </div>
    </div>

    <div class="loginbottom">
      版权所有 2019 Star-Net
    </div>
  </div>
</body>
</html>

frame.js

(function($){
    alert("1");
    function login(event){
        alert("2");
        event.preventDefault();
        var userName = $("#username").val();//获取用户名
        var password = $("#password").val();//获取密码
        //Ajax向后台提交用户名、密码
        alert("userName:"+userName+" password:"+password);
        $.post("/UserManager/loginController.do",{
            username:userName,
            password:password
        },
                function(data){
                    if((typeof(data)!="undefined")&&(null!= data)
                            &&(0==data)){
                //登录成功后隐藏登录表单
                $(".contain").hide();
                //登录成功后跳转到用户列表页
                $("#content").load("/UserManager/listUserController.do");
            }
        });
    }
    $("#btnRtSubmit").bind("click",login);//为btnRtSubmit绑定事件
})($);

我觉得问题应该出在frame.js上,但找不出问题在哪,大佬救我

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • weixin_38659265 会飞的咕咕鱼 1年前

    这样改就行了:

    function login(event) {
        // alert("2");
        event.preventDefault();
        var userName = $("#username").val(); //获取用户名
        var password = $("#password").val(); //获取密码
        //Ajax向后台提交用户名、密码
        alert("userName:" + userName + " password:" + password);
        $.post("/UserManager/loginController.do", {
                username: userName,
                password: password
            },
            function(data) {
                if ((typeof(data) != "undefined") && (null != data) &&
                    (0 == data)) {
                    //登录成功后隐藏登录表单
                    $(".contain").hide();
                    //登录成功后跳转到用户列表页
                    $("#content").load("/UserManager/listUserController.do");
                }
            });
    }
    $(function() {
        $("#btnRtSubmit").bind("click", login); //为btnRtSubmit绑定事件
    });
    

    造成你这个问题的原因:1. frame.js最外层的自调用函数,2 在login.html中在一开始引入了js ,这两个同时存在造成的

    建议:
    1.你可以看一下变量提升、函数提升以及页面加载顺序的相关知识
    2.为了前端性能优化,最好将js引入放在页面下方,css引入放在head里

    点赞 1 评论 复制链接分享
  • qq_38270796 D狂风R 1年前
        <input name="btnRtSubmit" type="button" class="loginbtn"  id="btnRtSubmit" onclick="login(this)" value="登录"/>
    
    点赞 评论 复制链接分享