登录功能实现与AJAX详解-优快云博客

下面是登录按钮被点击时所做的动作。这里有几个知识点记录一下：1） $. a j a x () 函数：它表示异步加载或处理，可以不影响其他组件响应，可以获取 u r l 返回的 j s o n 数据或者其他 h t m l 数据。 s u c c e s s 为响应成功（ 200 ）后的处理， f u n c t i o n （ r e s ）中的 r e s 即为返回结果。当返回 j s o n 时， r e s 为 j s o n 对象，可以直接使用 j s 代码处理。） 2$ .post()为post请求，url为请求的url地址，{“username”: username, “password”: password}为传递给url的请求参数，function(data) {window.location.href = “index”; }为响应成功后（200）的处理，这里处理是跳转到index页面。

function loginAction() {
    // 获取账号和密码输入
  	var username = $('#username').val();
  	var password = $('#password').val();
  	
  	// 账号和密码检查
  	layui.use('layer', function(){
 		    var layer = layui.layer;
 		    // 账号输入框检查
  		if (username == '') {
    	    layer.msg('账号不能为空！');	
    	} else if (password == '') {
    		layer.msg('密码不能为空！');
    	} else {
    		// 密码不为空的检查
  			let urlStr = "user/getLoginConfirm?username=" + username + "&password=" + password;

    		    $.ajax({
 		        url: urlStr,
 			    success: function(res) { 
    		      let resValue = res[0].flag;
    		      if (resValue == "0")
         			      layer.msg('密码不正确！'); 
    		      else if (resValue == "1") {
    		    	  $.post("login", {"username": username, "password": password}, function(data) {
    		    		  window.location.href = "index";
    		    	  });
    		      }
         				  
 			    }
    		  
 		  });
    	}
 		  
 		});  
  	
  	
  }