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

最新推荐文章于 2024-02-23 11:31:05 发布

weixin_45209491

最新推荐文章于 2024-02-23 11:31:05 发布

阅读量595

点赞数 1

分类专栏： jsp Java 文章标签： html javascript jquery

本文链接：https://blog.csdn.net/weixin_45209491/article/details/120303138

版权

Java 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

jsp

12 篇文章 1 订阅

订阅专栏

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 {

	   @Autowired
	   private 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+")' >";

weixin_45209491

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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].getElementsByTa
复制链接

扫一扫