ajax动态加载下拉框数据(前端js发送ajax请求,后端查询数据库,得到数据,返回前端),GET,POST,DELETE,PUT上一篇地址
上一篇讲了下拉框,现在说说复选框
先从简单的单选框说起
<tr><td class="tableleft">状态</td><td><input type="radio" name="rState" value="0" checked/> 启用<input type="radio" name="rState" value="1" /> 禁用</td></tr>
单选框
单选框在数据库中一般是以数值(整型)方式存储,也就是0和1,就是他们的value值,所以查询数据回显时一行代码搞定
//value是数据库中存储的数据,这行代码的意思是,选中value值为key的单选框,这样就实现了根据后台数据准确选择对应的单选框//注意,key要以字符串拼接的方式拼接,这样key就是变化的,而不是字符串$("input[name=rState][value="+ key +"]").attr("checked",true);
那些年踩过的坑
<tr><td width="10%" class="tableleft">角色名称</td><td><input type="text" name="rName" value=""/></td></tr>//普通的输入框直接传值(如下),单选框和复选框不能如此,//举个例子:两个单选框的值value都会变为uState,我就是因为太年轻犯下这样的错误//想修改状态,调试半天,怎么后台接收到的值不变,我还以为是后端出了问题(前端恐怖如期,嘿嘿)$("input[name='rName']").val(rName);//rName为后台传入的值
复选框
静态的只有一个id
<td class="tableleft">权限</td><td id="menuList"></td>
js代码
let menuList = [];//定义一个空数组,用来装复选框各选项对应的值(比如第一个是挂号管理,对应主键为1(可以查看上面菜单表),就把1存入)$(//页面加载事件,当页面加载完成时,发送ajax请求(可以看小明上一篇其他形式的ajax)function queryMenu () {//页面加载时,显示全部菜单$.get("/role/menu",function (vo) {//vo是小明自己封装的返回对象$("#menuList").empty();//清空var menus1 = vo.pageInfo.list;//根据个人情况,得到菜单集合//功能上类似java的forEach//我在别人那里学来的函数,第一个参数menus1是要遍历的集合,后面是一个匿名函数,i就类似java的for循环里的i,取其他的也行,//e应该是element元素的意思,也就是menus1集合里面的元素,在这是菜单元素$.each(menus1, function (i, e) {//字符串的拼接一定要注意,value值就菜单元素的主键也就是e.mId//mId和mName是后端菜单类的属性字段,不能搞混哦,(算了,到时贴出来)$("#menuList").append("<ul><label className='checkbox inline'><input type='checkbox' name='menus1' value='" + e.mId + "'/>" + e.mName + "</label></ul>");});//到这就把所有的菜单多选框都加载完了//老实说这两行代码我也不懂,大概意思就是把,从数据$("input[name='menus1']").each(function (i) {//把复选框的所有值存入数组//还记得第一行定义的那个数据吗(再去看下第一行注释)//这样就把数据库中所有的菜单主键值装入数据中了(这是让其自动选中做的准备)return menuList[i] = $(this).val();});},"json")}function queryById(rId) {$.ajax({type: "GET",url: "/role/"+rId, //RESTful风格的API定义data: "",success: function (vo) {let obj=vo.obj;let rId=obj.rId;let rName=obj.rName;let rState=obj.rState;let menus=obj.menus;$("input[name='rName']").val(rName);//单选框回显$("input[name=rState][value="+rState+"]").attr("checked",true);/*if (rState==1){//这个可以让rState==1即禁用状态的复选框也处于禁用状态//$("input[name=menus1]").addClass("disabled");$("input[name=menus1]").attr("disabled",true);}else {$("input[name=menus1]").removeAttr("disabled");}*///复选框回显//功能上类似java的forEach$.each(menus, function (o, e) {//menus是从数据库中查询出来的此角色包含的菜单for (var i=0; i<menuList.length; i++) {//还记得那个数据吗,装着所有复选框的值//这里是双重for循环,可以比对每一个值if (menuList[i]==e.mId){//只要该角色中的包含该菜单//页面就把该菜单对应的多选框选中,大概这么个意思$("input[name=menus1][value="+menuList[i]+"]").attr("checked",true);}};});}});});
前端有意思是有意思,可问题我不会😭,写这两篇博客把我仅有的前端知识都榨干了,以后…,不行,打死不能立flag,一立必死。
