js基本使用-前后台交互(工作问题及解决方法记录)

1、arrayObj.push(data)、row.cells[0]：

var arrayObj = new Array(); （var fdIds = [];）
var data={};var row = document.getElementById("edittr_"+index);
var busId = row.cells[0].getElementsByTagName("input")[0].value;
var sonName = row.cells[1].getElementsByTagName("input")[0].value;
var birthDate = row.cells[2].getElementsByTagName("input")[0].value;
var named = row.cells[3].getElementsByTagName("select")[0].value;
var workAndPosition = row.cells[4].getElementsByTagName("input")[0].value;
var cardType = row.cells[5].getElementsByTagName("select")[0].value;
var cardNumber = row.cells[6].getElementsByTagName("input")[0].value;
var busFlag = row.cells[7].getElementsByTagName("select")[0].value;
var uploadyear = row.cells[8].getElementsByTagName("select")[0].value;
var bussinessDeclare = row.cells[9].getElementsByTagName("textarea")[0].value;
var type = row.cells[11].getElementsByTagName("input")[0].value;data["busId"] = busId;
data["sonName"] = sonName;
data["birthDate"] = birthDate;
data["named"] = named;
data["workAndPosition"] = workAndPosition;
data["cardType"] = cardType;
data["cardNumber"] = cardNumber;
data["busFlag"] = busFlag;
data["uploadyear"] = uploadyear;
data["bussinessDeclare"] = bussinessDeclare;
data["type"] = type;
arrayObj.push(data);

function getTABLE_DocList(){var arrayObj = new Array();$("input[name='List_Selected']").each(function(){        //遍历checkbox的选择状态if($(this).prop("checked")){                        //如果值为checked表明选中了var tdArr = $(this).parent("td").parent("tr");  //获取选中行var fdid = tdArr.find("input[name='List_Selected']").val();var dnjdsigned = tdArr.find("select[name='dnjdsigned']").val();var ffclsigned = tdArr.find("select[name='ffclsigned']").val();var bussigned = tdArr.find("select[name='bussigned']").val();var dutytype = tdArr.find("select[name='dutytype']").val();var data={};data["fdid"] = fdid;data["dnjdsigned"] = dnjdsigned;data["ffclsigned"] = ffclsigned;data["bussigned"] = bussigned;data["dutytype"] = dutytype;arrayObj.push(data);}});var checkbox = $("input[type='checkbox']").is(':checked');if (!checkbox){}return arrayObj;}

2、$(this).prop(“checked”)

function ExportNzdalist(){var fdIds = [];var allCheckbox = $("input[name='List_Tongle']").prop("checked");if(!allCheckbox){$("input[type='checkbox']").each(function(){ //遍历checkbox的选择状态if($(this).prop("checked")) {            //如果值为checked表明选中了fdIds.push($(this).val());}});listExport('${LUI_ContextPath}/pro/relatework/pro_relatework_jjjc_inspectassert/proRelateworkJjjcInspectassert.do?method=listExport&fdModelName=com.landray.kmss.pro.relatework.model.ProRelateworkJjjcInspectassert&fdIds='+fdIds)}else {listExport('${LUI_ContextPath}/pro/relatework/pro_relatework_jjjc_inspectassert/proRelateworkJjjcInspectassert.do?method=listExport&fdModelName=com.landray.kmss.pro.relatework.model.ProRelateworkJjjcInspectassert');}
}

3、<c:if> <c:forEach>

<%bussinessList = proRelateworkJjjcPersonmsgService.getRelativeBusiness(userCode2,userName2);request.setAttribute("bussinessList",bussinessList);
%><c:if test="${ bussinessList.size() > 0}"><c:forEach items="${bussinessList}" var="bussinessMap" varStatus="varStatus"><tr class="showtr_${varStatus.index}" ><td width='2%'><input type="checkbox" style="display: none" class="showcheckbox" name="bussinessId" value="${bussinessMap.busDeclareId}"><span name="busId" >${varStatus.index+1}</span></td><td width="5%" align="center"><xform:text property="sonName" className="sonName" value="${bussinessMap.sonName}" /></td></tr></c:forEach>
</c:if>

4、通过标签id\name\class去设置标签style

<style>#criteria1 .lui_item_sign{display: none !important;}#lui-id-17 .criterion-collapse #lui-id-18 .criterion-all {display: none !important;}
</style>

5、request对象的使用

String userCode2 = request.getParameter("userCode1");
<html:hidden property="userid" value="<%=userCode2%>"/>

6、通过标签id\name\class获取value

/***点击保存后调用*/
function checkParam() {var fileNameArray = $(".upload_list_filename_title");var selectYear = document.getElementById("uploadyear").value;console.log(selectYear);if(fileNameArray.length<1) {seajs.use(['lui/dialog'],function(dialog) {dialog.alert('至少选择一个附件');});return false;}if(selectYear == "") {seajs.use(['lui/dialog'],function(dialog) {dialog.alert("请选择年份");});return false;}return true;
}

7、弹出窗口

dialog.confirm('${ lfn:message("page.comfirmDelete") }', function(isOk) {if(isOk) {delCom_OpenWindow(delUrl);
}dialog.alert('删除失败！');console.log(selectYear);

8、.attr(）、location.href、encodeURI(’<%=userName2%>’)

//对userName2编码
location.href= "${LUI_ContextPath}/pro/relatework/pro_relatework_jjjc_personmsg/proRelateworkJjjcDnjdAttach.jsp?userName1="+
encodeURI('<%=userName2%>')+"&userCode1="+encodeURI('<%=userCode2%>');var url = data.bsMsgUrl+"/DocRead_Entry.do?folderID=5&taskId=null&operator=edit&tableName=RLZY_YGDJ&docID="+data.docId+"&subjectId=6699&showName=" +
encodeURI('员工信息')+"&formID="+data.formId+"&name="+encodeURI(data.userName)+"&dyjlFlag=dyjl";$(window.parent.document).find("#personmsg .lui_widget_iframe").attr("src",url);
$(window.parent.document).find("#personmsg .lui_widget_iframe").attr("src","${LUI_ContextPath }/resource/jsp/list_norecord.jsp");   <ui:iframe  id="personmsg" src="${LUI_ContextPath }/pro/relatework/pro_relatework_jjjc_personmsg/proRelateworkJjjcPersonmsg_view.jsp?userCode1=${fdCode0}" ></ui:iframe>

9、点击按钮或选择option，标签内容的隐藏和显示

/**
*选中intoinspectflag按钮，bussigned标签内容显示
*/
function changeInspectflag(){$("#bussigned:checked").attr("checked",false);//刷新bussigned的选择状态，重新选择按钮var intoinspectflag = $(':radio[name="intoinspectflag"]:checked').val();//获取选择状态if (intoinspectflag=="Y") {$("#bussigned").show();//bussigned按钮显示$(':radio[name="bussigned"]').attr("validate","required");//更新标签的属性值}else {$("#bussigned").hide();//bussigned按钮隐藏$(':radio[name="bussigned"]').attr("validate","unrequired");  //更新标签的属性值}
}/**
*type 选择postChange，newDeptAndPosition标签内容显示
*/
function changeTypeflag(){var typeflag =  $("#type option:selected").val();if (typeflag=="postChange") {$(".newDeptAndPosition").css("display","");}else {$(".newDeptAndPosition").css("display","none");}
}

10、 ajax请求模板

前台：
function submitForm(){var arrayObj = getTABLE_DocList();if(arrayObj.length > 0) {var url = "${LUI_ContextPath}/pro/relatework/pro_relatework_jjjc_inspectassert/proRelateworkJjjcInspectassert.do?method=updateFormByIds"$.ajax({type: "post",url: url,//data:$.param({"List_Selected":busIds},true),data: {"data": JSON.stringify(arrayObj)},//js对象转换为json对象async: true,//true：异步请求（请求无序），false：同步请求（请求按顺序）dataType: "json",success: function (data) {if(data.status == "Y" && confirm("保存成功！") == true) {location.href= "${LUI_ContextPath}/pro/relatework/pro_relatework_jjjc_inspectassert/index.jsp";parent.location.reload();//当async: true时,reload()可能在请求没结束时已加载。// window.location.reload();}else if(data.status == "N") {seajs.use(['lui/dialog'],function(dialog) {dialog.alert('保存失败！');});}},error : function(){seajs.use(['lui/dialog'],function(dialog) {dialog.alert('保存失败！');});}});}
}后台：
//String[] busIds = request.getParameterValues("List_Selected");
net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(request.getParameter("data"));//json转java
JSONObject rtn = new JSONObject();//json数据
rtn.put("status","Y");
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(rtn.toString());//后台传字符串到前台前台传字符串-后台接收：
data:{"fdiD":fdiD}
String  fdiD= request.getParameter("fdiD");
前台传数组-后台接收：
data:$.param({"List_Selected":busIds},true),
String[] busIds = request.getParameterValues("List_Selected");
前台传数组-后台接收：
data: {"data": JSON.stringify(arrayObj)},
net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(request.getParameter("data"));js、json、java三者的转换
JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
fromJson() 方法将JSON字符串解析为java对象
toJson() 方法将Java对象转换为JSON

11、第三方接口

1、请求方：
String result = "";
RestTemplate restTemplate = new RestTemplate();
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_JSON);
Map<String,String> map = new HashMap<String,String>();
map.put("usercode",usercode);
HttpEntity<String> entity = new HttpEntity(map, headers);ProBaseConfig config = new ProBaseConfig();
String jjjcUrl = config.getValue("jjjc.getPersonMsgByUserCode");//String  jjjcUrl = "http://localhost:8050/relatework/getPersonMsgByUserCode";result = restTemplate.postForObject(jjjcUrl, entity, String.class, new Object[0]);JSONObject jsonResult =new JSONObject();
jsonResult = JSONObject.fromObject(result);//字符串转换为JSONObject
data = jsonResult.getString("data");//获取JSONObject 的data字段
//data字段数据先转换为json数据，在转换为java对象
JjjcPersonMsg datas =JSONObject.toBean(JSONObject.fromObject(data),JjjcPersonMsg.class)；2、接收方：
@RestController
@Api(tags = "1.0.2",value = "纪检监察接口")
@RequestMapping(path = "/relatework",produces = {MediaType.APPLICATION_JSON_VALUE})
public class RelateworkJjjcApi {@Autowiredprivate Doc_RLZY_YGDJ doc_RLZY_YGDJ;@ApiOperation(value = "个人信息接口")@PostMapping(path = "/getPersonMsgByUserCode")public Result getPersonMsgByUserCode(@RequestBody Map<String,String> map){String usercode = map.get("usercode");if (null == usercode || "".equalsIgnoreCase(usercode)){return ResultUtil.error(ResultEnum.PARAM_BLANK_ERROR.getCode(),"账户不能为空");}JjjcPersonMsg jjjcPersonMsg = doc_RLZY_YGDJ.getPersonMsgByUserCode(usercode);return ResultUtil.success(jjjcPersonMsg);//返回 Result对象}
}public static Result success(Object object) {Result result = new Result();result.setCode(ResultEnum.SUCCESS.getCode());result.setMsg(ResultEnum.SUCCESS.getMsg());result.setData(object);return result
}

12、request.getParameter、request.getParameterValues、request.getParameterMap

对于getParameter()、getParameterValues()、getParameterMap()用法。首先request中的参数parameter是一个map表，如下例：
map={username=[xxx],password=[xxx],hobby=[eat,drink]}调用getParameter(“hobby”)时只能获取hobby[0] ，即eat调用getParameterValues(“hobby”)时能获取hobby=[eat,drink]这个数组调用getParameterMap时能获取整个map对象。
链接：https://blog.csdn.net/qq_23121031/article/details/77334430

13.提示框

workinfo.jsp

function bj(sys_id,infomationMtName){var url="/OMSS/generalclass/BMYW/JCSSTZGLB/RYFG/txOrlsxUpdateData.jsp?id="+sys_id+"&infomationMtName="+infomationMtName;$.XYTipsWindow({___title:"人员维护修改",___content:"iframe:"+url,___width:"800",___height:"240",___drag:"___boxTitle",___showbg:true});
}   $("#closepp").click(function(){$.XYTipsWindow.removeBox();//点击提示框关闭按钮，移除提示框
});

txOrlsxUpdateData.jsp

function returnData(){ parent.$.XYTipsWindow.removeBox();//点击提示框关闭按钮，移除提示框
}

13.后台数据传到前台后拼接成js对象，然后赋值到标签中（$("#pending2>tbody").html(html);）

//查询记录
function findPendingData(){var searchName = $("#searchName").val(); $("#pending1").css("display","none");$("#pending3").css("display","none");$("#pending2").css("display","");var ret = getTestAjaxPost("RYFG.PersonalMantain/getWorkInfo",encodeURI("searchName="+searchName));if(ret!=null){var dataObj = eval("("+ret+")");var datas = dataObj.info;var dataList = datas.datas;var html = "";var j=0;for(var i=0;i<dataList.length;i++){var sys_id = dataList[i].sys_id;var FFullName = dataList[i].FFullName;var sys_control2 = dataList[i].sys_control2;var subjectId = dataList[i].subjectId;var sys_type = dataList[i].sys_type; var sys_control3 = dataList[i].sys_control3;var personNamemap = dataList[i].personNamemap;//map数据var j=j+1;html = html + "<tr bgcolor='#ffffff'><td align='center'>"+j+"</td>";html = html+"<td align='center'>"+FFullName+"<input type='hidden' name='project_infomationMt_parentId' id='project_infomationMt_parentId' value='"+sys_id+"'></td>";$.each(personNamemap,function(key,value){    //map数据             html = html+"<td align='center'>"+value+"</td>";                });html = html+"<td align='center'><input type='button' onclick='bj("+sys_id+")' style='margin-left:10px;margin-rigth:20px;' value='编辑'/></td></tr>";               }$("#pending2>tbody").html(html);    //js字符串对象赋值到标签}else{return false;}
}

14.设置select 中选中的option

1、$(".selector").find(“option[text=’<%=curUserDepartmentID%>’]”).attr(“selected”,true);
2、 name="<%=strDeptSelId%>_show"

<%String strDeptSelId = "problemdeptcode"; //原查询页面部门id名
%>
<select class="selector" name="<%=strDeptSelId%>_show" id="<%=strDeptSelId%>_show" onchange="setDeptSearchValue(this,<%=strDeptSQLMethod%>);selectThisValue(this)">   <option value='' selected>请选择</option> <%out.println(" if(typeof "+strDeptShowFlag+"_show=='undefined')"+strDeptShowFlag+"_show=document.getElementById('"+strDeptShowFlag+"_show'); ");                   //查询OMSS后台表DeptInfoObj[] deptinfos = GetCompGroupInfo.getDeptGroup();if(deptinfos!=null && deptinfos.length>0){out.println("for( var u=f1."+strDeptSelId+"_show.length-1; u >-1; u--)");out.println(" f1."+strDeptSelId+"_show[u]=null;");out.println("f1."+strDeptSelId+"_show.add(new Option(\"请选择\", \"\"));");    for(int i=0;i<deptinfos.length;i++){                     //21:value为OMSS后台code;//IE、谷歌都适用out.println("<option value='"+deptinfos[i].getDptcode()+"'>"+deptinfos[i].getDptname()+"</option>");
//谷歌不适用，兼容性问题
out.println(strDeptSelId+"_show.add(new Option(\""+deptinfos[i].getDptname()+"\",\""+deptinfos[i].getDptcode()+"\"));");            }}                  %>
</select>

onmouseover +转义字符

//onmouseover 事件会在鼠标指针移动到指定的元素上时发生
td7.innerHTML="<input name='YZB_JJKJ_DGTZS_SON1.fzrlxfs' value='"+tghlxfs+"' onmouseover='displayTrusteeInfo(this,"+'\"'+jjId+'\"'+","+gwid+")' >";