JAVA与JSP交互信息方式笔记

随着后端框架的崛起我们后端已经很少写前端的代码了比如现在的vue…记得刚毕业的时候接触的项目就是传统的SSM框架，界面也就是JSP我当时负责java后端和web的编码工作也算是积累了一些很基础的知识，近两年就没在写过。后来的工作中又涉及到了一些老的项目开发又重新捡回来了很久很久之前的感觉。这里只为记录自己的心德和回忆。

后台返回前台

一、Spring MVC使用model.addAttribute传给前端

后台代码片段查询的list集合返回给前端：

model.addAttribute("list", list);//自定义：list可以是一个bean列表

方式一：JSP小脚本接收：

<%
 	List list =  request.getAttribute("list");//自定义：可以把结果进行遍历到列表
%>

方式二：

${list}//自定义：可以根据需求处理结果

二、Spring MVC使用response.getWriter()传给前端

一般界面保存成功后跳转一个界面重新查询列表直接跳转就行了，如果用ajax保存完毕后不跳转回填一个值

//java:
@RequestMapping(value = "insert")
public String insert(HttpServletResponse response)  {
	String url = url;
	response.getWriter().append(url);
	return null;
}
//jsp:
$.ajax({
    type: "post",
    url: "xx/xx/insert",
    data: $('#form').serialize(),
    success: function (data) {
         $("#url").val(data);//使用选择器回填结果
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        alert("ajax error!");
    }
});

三、Spring MVC返回前端Map

//java后台查询查询是否成功
@RequestMapping(value = "selectList")
@ResponseBody
public HashMap<String, Object> selectList(TestMode testMode,String id, HttpServletRequest request, HttpServletResponse response) {
	HashMap<String, Object> respMap = new HashMap<String, Object>();
	List<TestMode > testModeList = new ArrayList<TestMode >();
	try {
		testMode.setId(id);
		testModeList= testMode .selectList(testMode);
		respMap.put("data","success");
		respMap.put("list",testModeList);
	} catch (Exception e) {
		respMap.put("data","fail");
		respMap.put("list",testModeList);
	}
	return respMap;
}
//jsp
$.ajax({
      type:"post",
      url:"xx/xx/selectList",
      data:{"id":id},
	  success : function(data) {
          $("#contentTable tbody").html("");//我要把结果遍历到table，如果有值我就拼html
	      if(data.data=="success"){//返回成功
			 var list=data.list;
			 if(list==""){//没有数据展示
                tbBody += "<tr><td colspan=\"5\">无数据</td></tr>";
                $("#contentTable").append(tbBody);
             }else{//有数据
			    var count = 0;
                for (i in list) {
                    var tbBody = "";
                    var status= "status" + count;
                    tbBody += "<tr><td>" + list[i].equityId + "</td>";
                    tbBody += "<td>" + list[i].equityName + "</td>";
                    tbBody += "<td><input type=\"radio\" name=" + status+ " value = \"1\">开启</input><input type=\"radio\" name=" + status+ " value = \"0\" checked=\"checked\">关闭</input></td></tr>";
                    $("#contentTable").append(tbBody);
                    count++;
                }
             }
           }else{
              	alert("后台查询异常！");
           }
        }error : function(XMLHttpRequest, textStatus, errorThrown) {
           alert("ajax error!");
        }
  });

前台返回后台

一、JSP中拼写json传给JAVA后台处理

//jsp保存列表中radio选中并开启的数据(1.定义主数据2.遍历列表选中的数据3.拼接4.ajax传后台)
function save(){
      if (confirm("你确定提交吗？")) {
          var isAppend = false;
          var params = "{\"groupId\":\""+$("#groupId").val()+"\",\"groupEquityStatus\":\""+$("#groupEquityStatus").val()+"\",\"groupLevel\":\""+$("#groupLevel").val()+"\",\"equityList\":[";
          $('input:radio:checked').each(function(){//遍历列表选中的值
              var tr = $(this).closest('tr'), tds = tr.find('td');
		var cheakStatus = tds.eq(4).find($('input:radio:checked')).val();
              if(cheakStatus==1){
                  params += "{\"equityId\":\"" + $.trim(tds.eq(0).text()) + "\",\"equityName\":\""+$.trim(tds.eq(1).text()) + "\",\"equityType\":\""+ equityType + "\"";
                  params += ",\"displayOrder\":\"" + $.trim(tds.eq(3).text()) + "\",\"enableStatus\":\""+$.trim(tds.eq(4).find($('input:radio:checked')).val()) + "\"},";
                  isAppend=true;
              }
          });
          if(isAppend==true){//如果上面的json已经拼了出来后面补全json
              params = params.substring(0,params.length-1);
              params += "]}";
	}else {//如果上面没有值就重新定义
              //TODO 此处拼接[有转义问题没解决，就是我这里拼接结束符号不生效所以重新定义了
              params = "{\"groupId\":\"" + $("#groupId").val() + "\",\"groupEquityStatus\":\"" + $("#groupEquityStatus").val() + "\",\"groupLevel\":\"" + $("#groupLevel").val() + "\",\"equityList\":[]}";
          }
	//提交后台
          $.ajax({
              type:"post",
              url:"xx/xx/save",
              data:{"dataJson":params
              },success : function(data) {//请求的返回成功的方法
                  if(data.data=="success"){
                      alert("success！");
                  }else{
                      alert("fail！");
                  }
              },
              error : function(XMLHttpRequest, textStatus, errorThrown) {
                  alert("ajax error!");
              }
          });
      }
  };
//java代码(1.获取json2.转成bean3.保存返回界面结果)
@RequestMapping(value = "save",produces="application/json;charset=UTF-8")
@ResponseBody
public HashMap<String, Object> save(TestModel testModel , String dataJson, HttpServletRequest request, HttpServletResponse response) {
	HashMap<String, Object> respMap = new HashMap<String, Object>();
	String jsonStr = StringEscapeUtils.unescapeHtml(dataJson);
	try {
		//获取的json转成bean
		JsonDto dto = JSONObject.parseObject(jsonStr,JsonDto.class);
		//保存操作
		this.save(dto);
		respMap.put("data","success");
	} catch (Exception e) {
		respMap.put("data","fail");
	}
	return respMap;
}