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

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

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？