标签：ESS row 文件名 index Servle 资料 ble 总结 接受
前言
本人最近在做一个项目，需要将本地文件夹的照片读取到前台进行显示，显示的时候，需要对照片进行批注，如下图所示。本文涉及的知识点包括：
1，如何设定bootstrap样式？
2，如何获取每一行的checkbox的值？
3，按照“文件名-图片-缺陷类型”进行组装，利用ajax向后台发送请求，保存到数据库
这在显示的时候，就需要对某些列增加checkbox按钮。在实现的时候也是找了很多的资料，后头在参考了bootstraptable怎么实现自定义按钮列的操作的时候，发现了可以return一个HTML代码块到相应的table里面，就参照这个思路实现了我的想法。
一：设定bootstrap样式
知识点1的参考代码如下：
function showTable() { $(‘#table‘).bootstrapTable({ data:imageList, columns: [{ field: ‘fileName‘, title: ‘fileName‘, formatter : function (value, row, index) { console.log() return"<p name=‘fileName‘>"+value+"</p>"; } },{ field: ‘base64Image‘, title: ‘照片‘, formatter : function (value, row, index) { return"<img name= ‘imageSrc‘ src=‘"+value+"‘ alt=‘‘ style=‘width: 60px;height: 60px‘>"; } }, { field: ‘normal‘, title: ‘正常‘, formatter:function(value, row, index){ return "<label><input type = \"checkbox\" value=‘正常‘style=‘height: 20px;width: 20px‘>正常</label>" } },{ field: ‘curl‘, title: ‘卷边‘, formatter:function(value, row, index){ return "<label><input type = \"checkbox\" value=‘卷边‘style=‘height: 20px;width: 20px‘>卷边</label>" }},{ field: ‘fracture‘, title: ‘破裂‘, formatter:function(value, row, index){ return "<label><input type = \"checkbox\" value=‘破裂‘style=‘height: 20px;width: 20px‘>破裂</label>" }}, { field: ‘notBulge‘, title: ‘未胀开‘, formatter:function(value, row, index){ return "<label><input type = \"checkbox\" value=‘未胀开‘style=‘height: 20px;width: 20px‘>未胀开</label>" }}] }); }
二：提取每张照片的缺陷
想要提取每张照片的缺陷，就需要遍历每一行的checkbox，然后检查是否checked，如果是，则把每一个checkbox的value保存到一个数组内。这里想要实现这个目标，就需要两个步骤：准确提取到每一行的checkbox和遍历每一行的checkbox集合。
2.1准确提取到每一行的checkbox
要想实现准确提取到每一行的checkbox，如果我们把每一行的checkbox都设定一个id，也可以获取到，但是因为id是变化的且不相同的，所以这就给我们提取造成了困难。
但是同时，我们想到js里面可以针对html元素的name进行提取，这就意味着，我们只需要将每一行的checkbox设定一样的name就可以了，考虑到知识点1中，formatter中的函数有三个变量，分别是value，row和index，其中index就是每一行的序号，因此我们只需要将index组合到checkbox的name里面，name就可以为每一行设定不一样的且有规律name。实现代码如下：
return "<label><input name=‘checkbox"+index+"‘ type = \"checkbox\" value=‘未胀开‘style=‘height: 20px;width: 20px‘>未胀开</label>"
2.2遍历checkbox集合
我们可以通过js的函数：getElementsByName，获取checkbox集合，并进行遍历。实现代码如下：
var results =[]; var fileNameList=document.getElementsByName("fileName"); var imageSrcList=document.getElementsByName("imageSrc"); for (var i = 0; i <fileNameList.length ; i++) { var imageDefect={}; var fileName=fileNameList[i].innerText; var inputName="checkbox"+i; var chechbox= document.getElementsByName(inputName); var checkvalue=[]; for (var j = 0; j <chechbox.length ; j++) { if (chechbox[j].checked){ checkvalue.push(chechbox[j].value); } } results.push(imageDefect); }
三、封装和请求
按照“图片名-图片信息-缺陷信息”进行封装，然后利用ajax发出请求
封装代码： imageDefect={ ‘imageName‘:fileName, ‘imageSrc‘:imageSrcList[i].src, ‘Defect‘:checkvalue, }; ajax请求代码： $.ajax({ url:"save2Mysql", type:"post", data:JSON.stringify(data), dataType:"json", success:function (result){ console.log("请求成功！"); } })
附： 错误记录
1，在利用ajax向servlet发出请求时，开始是get请求，然后运行时浏览器报了一个400的错误。网友普遍说道这是一个传递的参数类型不一致导致的controller层无法接受数据的问题。但是反复检查之后，因为数据也是json格式的不应该出问题。
于是想到了ajax的两种请求方式，get请求和post请求，get请求普遍是用在获取数据，post请求普遍是用在提交数据。这里是想servlet发出请求，并提交数据，分析之后认为应该是post请求。
标签：ESS row 文件名 index Servle 资料 ble 总结 接受
原文地址：https://www.cnblogs.com/cquer-xjtuer-lys/p/10496460.html
