网站前端-js知识

登录: params的声明,post请求(ajax)

function doLogin(){
	var params={
		username:$("#usernameId").val(),
		password:$("#passwordId").val()
	}
	var url="user/login";
	// console.log("params",params);
	$.post(url,params,function(result){
		if(result.state==20){
			alert("登录成功！");
			location.href="/"; //自动跳转首页
		}else{
			// 显示错误提示信息
			$(".login-box-msg").html(result.message); 
		}
		return false;//防止刷新时重复提交
	});
}

load方法: 只传一个参数(url)

	// 页面加载完毕后，自动为日志管理按钮添加点击事件
	$(function(){
		setClick("load-log-id","sys/log_list");
		setClick("load-menu-id","sys/menu_list");
		setClick("load-role-id","sys/role_list");
		setClick("load-user-id","sys/user_list");
	});
	
	function setClick(id,url){
		$("#"+id).click(function(){
			// 发送AJAX请求，获取日志管理子页面
			// 收到响应后，会自动加载页面到mainContentId的内部
			$("#mainContentId").load(url);
		});
	}

load方法: 传两个参数,第一个执行成功后,调用第二个参数(方法)

// 页面加载完成后，发送AJAX请求
$(function(){
	$(".btn-search").click(queryData);
	
	// 请求page.html的内容并显示
	var page_url="common/page";
	// 将findPageRecords作为当前AJAX的回调函数
	$("#pageId").load(page_url,queryData);
	
	// 为添加按钮设置点击事件
	$(".btn-add").click(function(){
		var url="sys/user_edit";
		$("#mainContentId").load(url);
	});
});

按钮绑定点击事件,get请求(ajax)

	// 页面就绪事件
	$(function(){
		// 为上级菜单的输入框添加点击事件
		$("#parentId").click(doLoadZtreeNodes);
		// 上级菜单列表中的按钮的点击事件
		$("#menuLayer")
		  .on("click",".btn-confirm",doSetSelectedNode)
		  .on("click",".btn-cancel",doHideZtree);
		
		//菜单表单下方按钮的点击事件
		$(".box-footer")
		.on("click",".btn-cancel",doCancel)
		.on("click",".btn-save",doSaveOrUpdate)
		
		var menuId=$("#mainContentId").data("updateMenuId");
		if(menuId!=undefined){
			// 发送AJAX请求
			var url="menu/findSysMenuById";
			var params={"menuId":menuId};
			$.getJSON(url,params,function(result){
				if(result.state==20){// 正常响应
					var rowData=result.data;
					doInitEditFormData(rowData);
				}else{
					alert(result.message);
				}
			});
		}
	});

为4个按钮添加点击事件

$(function(){
    // 为4个按钮添加点击事件
    $(".first,.pre,.next,.last").click(updatePageRecords);
})

prop方法(拿取或者设置属性),data方法(绑定或者拿取值)

js语法允许动态的为一个对象绑定属性和值，在后续的程序运行中，可以直接访问该对象的指定属性的值。

$("选择器").data("属性名",属性值);// 为对象动态添加属性和值
var value=$("选择器").data("属性名");// 获取该对象指定属性的值

	function doInitEditFormData(rowData){
		$("input[value="+rowData.type+"]").prop("checked",true);
		$("#nameId").val(rowData.name);  
		$("#sortId").val(rowData.sort);  
		$("#permissionId").val(rowData.permission);  
		$("#urlId").val(rowData.url);  
		$("#parentId").val(rowData.parentName);  
		$("#parentId").data("parentId",rowData.parentId);
	 }

each方法

	function checkAll(){
		// 获取全选按钮当前的状态
		var flag=$("#checkAll").prop("checked");
		
		// 设置列表中所有checkbox的状态
		$("#tbodyId input[type=checkbox]").each(function(){
			$(this).prop("checked",flag);
		});
	}

数组的push方法,以及往params里面通过toString方法设置该数组的值

function doGetEditFormData(){
	//获取用户输入的数据
	var params={
		username:$("#usernameId").val(),
		password:$("#passwordId").val(),
		email:$("#emailId").val(),
		mobile:$("#phoneId").val(),
		deptId:$("#deptId").data("deptId")
	}
	//获取选择的角色
	var roleIds=new Array();
	$("#rolesId input[name='roleId']").each(function(){
		if($(this).prop("checked")){
			roleIds.push($(this).val());
		}
 	});
	params.roleIds=roleIds.toString();
	return params;
}

array.length方法: 数组的长度

function deleteRecord(){
    // 获取页面中所有被勾选的checkBox的value：array
    var array=[];// 保存id的数组，默认为空
    // 遍历页面中所有的checkBox
    $("#tbodyId input[type=checkbox]").each(function(){
        // 如果被勾选
        // <input type="checkbox" checked="true">
        if($(this).prop("checked")){
            // 将checkBox的value添加到array中
            array.push($(this).val());          
        }
    });

    // 判断array的长度是否为0
    if(array.length==0){
        // 是：弹出错误提示信息 return;
        alert("请至少选择1条记录");
        return;
    }

    var del_log_url="log/delete";
    var params={
            "ids":array.toString() // [12,13,14] -> "12,13,14"
    }
    // 发送AJAX请求给服务器，执行删除操作
    $.post(del_log_url,params,function(result){
        // 判断result.state的值是否为20
        if(result.state==20){
            // 是：提示删除成功，并且更新日志列表
            alert("删除成功！");
            queryData();
        }else{
            // 否：提示服务器返回的错误信息
            alert(result.message);              
        }
    });
}

switch-case: 可以使用字符串形式

// 为4个分页工具按钮添加的点击事件的处理逻辑
function updatePageRecords(){
    // 获取当前的pageCurrent的值-从#pageId对象上获取
    var pageCurrent=$("#pageId").data("pageCurrent");
    var pageCount=$("#pageId").data("pageCount");

    // 获取当前按的是哪个按钮   this-代表当前方法调用者
    var classValue=$(this).prop("class");
    // 根据不同按钮执行不同的逻辑
    switch(classValue){
    case "first":
            if(pageCurrent==1) return;
            else pageCurrent=1;
        break;
    case "pre":
            if(pageCurrent==1) return;
            else pageCurrent--;
        break;
    case "next":
            if(pageCurrent==pageCount) return;
            else pageCurrent++;
        break;
    case "last":
            if(pageCurrent==pageCount) return;
            else pageCurrent=pageCount;
        break;
    }
    findPageRecords(pageCurrent);
}