js和ajax-2023/4/5

//页面加载完成执行的方法
$(function () {
    //加载layui的模板 ：from
    layui.use('form', function () {
        //重新定义一个名字
        //var变量
        let form = layui.form;
        //var已被let和const替代
        //let定义变量的意思
        //const定义常量的意思
        //js定义变量不需要定义指定数据类型，直接通过值来确定数据类型
        //js的数据类型有那些？
        //数字  number
        //   let num=1;
        //字符  string
        //   let stra="a";//只要是引号括起来就是字符，，不区分单引号号
        //  let stab='b';
        //布尔  boolean
        //   let  boo=true;
        //对象  object
        //  let obj={name:'assd',age:19};//大括号括起来key-value
        // let  obje={'name':'name','age':19}
        //普通对象和json对象的区别? 都是对象，用法一模一样，只不过json对象的key一般用引号括起来
        //数组  array
        //   let arr=[num,stab,boo,obj,[1,2,"fads"]]

        // console.log(typeof arr)
        //null  define
   
        // layer.msg('玩命卖萌中', function(){
        //   //关闭后的操作
        //   });
        //监听提交
        //监听提交，监听某一个按钮，某一个div，然后会干一件什么事情?
        //定义方法
        // function f(){ 相当于public void aa(){}
        // return 1;
        // }
        // js是一门弱语言,所以，不需要像Java那么强制要求怎么写
        // function getName(age){
        //     if (age>5){
        //         return "a"
        //     }else {
        //         return "b"
        //     }
        //     return;
        // }
        //   });


        //监听提交
        //监听提交，监听某一个按钮，某一个div，然后会干一件什么事情?

        form.on('submit(login)', function (data) {
            // console.log(data)
            data = data.field// 将表单里面的值得到后重新写入到data
            // console.log(data)
            // alert(888)
            // JSON.stringify(data.field)//将对象转换为json字符串
            // JSON.parse("{'a':111，b':'aaa'}")//将字符串转换为json对象
            // layer.msg(JSON.stringify(data.field),function(){
            // location.href='/html/index.html'

            $.ajax({
                url: '/login',//对应Java的webServlet的注解
                data: data,//要传递到Java后台的数据
                type: 'post',//对应doPost
                dataType: 'json',//固定json格式
                success: function (res) {//如果调用成功，则得到返回的数据
                    // console.log(res)
                    if (res.code == -1) {
                        layer.msg("验证码错误，请重新输入");
                       $("#code").val('');//将当前的input表单重新赋值
                        $("#code").focus();
                    } else if (res.code == 0) {
                        layer.msg("用户名或者密码错误，请重新输入");
                        $("#username").focus();
                    } else {
                      //登录成功后，需要再另一个页面拿到当前的用户名需要将值，存到session或者application
                        sessionStorage.setItem("username",data.username);

                        //登录成功后跳转到后台管理页面
                        window.location.href = '/html/index.html';

                    }
                }

            });
            return false;
        });
    });
})

function changeCode(obj) {
    //changeCode监听 img src="/code"
    //$(obj)得到对象
    // 浏览器有一个保护机制，访问后台如果地址一样，则直接从缓存里面取数据
    // 为了让地址不一样，则每一次可以传递一个不同的参数
    //attr就是setAttribute
    $(obj).attr("src","/code?aa="+Math.random());

    //js 得到焦点js
    // 拿到对象 一般用id
    $("#code").focus();

}