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);}};});}});});

前端有意思是有意思,可问题我不会

jquery,ajax动态从数据库加载数据并自动选中复选框相关推荐

php ajax 加载列表,Ajax点击不断加载数据列表（图文教程）
这篇文章主要介绍了Ajax点击不断加载数据列表的相关资料,需要的朋友可以参考下 Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步Ja ...
jq获取内容ajax传递数据库,使用php和jquery ajax从mysql数据库中获取数据
我想使用php和jquery ajax从mysql数据库中获取数据." process.php"是连接到数据库并获取mysql数据的php文件.当它单独运行时它可以工作,但是当使用 ...
vue+element 动态加载数据，checkbox实现全选，不全选
效果图: 功能描述: 图中所展示数据,全是从服务器获取的数据动态加载,实现点击全选,不全选,加粗字体为父节点,后面为子节点. 数据结构: [{"children": [{" ...
Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现
Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...
调用ajax后页面为什么会刷新,为什么页面在JQuery ajax调用之后重新加载？
根:Create.php 根/资源/ JS:ajaxLibrary.js 在我create.php文件我有一个看起来像这样的形式: Create 我ajaxLibrary.js看起来是这样的: fun ...
ios 平滑移动view_iOS 关于列表上拉（平滑加载数据）自动加载数据的问题
项目需求我的的列表需要改变,原来的分页加载采用的是MJRefresh框架进行加载更多数据,这需要有一个上拉动作才能触发,而我的产品的意思是当快要滑动到底部时自动加载下一页数据.我自己看了一下,发现很 ...
jqgrid ajax加载数据,如何通过ajax在jqgrid中加载数据（json）？
我有一个函数(在Java小服务程序)返回该JSON格式: [{"citta":"XXXX","via":"XXX",&q ...
jqury ajax 直接获取数据库信息,使用jQuery Ajax从数据库加载信息
问题我尝试使用以下 // Start method 1 var grbData = $.ajax({ type : "GET", url : "http://grb.s ...
echarts动态加载数据生成饼状图
本文简单介绍使用ajax从JSON文件加载数据,动态生产并状态,第一次写,供大家参考.欢迎大家提出优化意见和建议. 一下是前端的代码: <!DOCTYPE html> <html l ...

jquery,ajax动态从数据库加载数据并自动选中复选框

ajax动态加载下拉框数据(前端js发送ajax请求,后端查询数据库,得到数据,返回前端),GET,POST,DELETE,PUT上一篇地址

上一篇讲了下拉框,现在说说复选框

单选框

那些年踩过的坑

复选框

静态的只有一个id

js代码

jquery,ajax动态从数据库加载数据并自动选中复选框相关推荐

最新文章

热门文章