阿黄Ahuang 2020-01-01 13:08 采纳率: 50%
浏览 2993
已采纳

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条回答 默认 最新

  • 会飞的咕咕鱼 2020-01-02 19:02
    关注

    这样改就行了：

    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条)

报告相同问题？

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog