前台 jsp 与 后台 servlet 的数据交互问题

时间：2022-01-07 21:13:00

前沿：现在通常前后台交互的做法是 前端在jsp中 通过js 生成 div input 等 标签， 包括 里面的属性 class id value 等 ， 然后 通过 Ajax 进入 servlet中 进行数据 查询 或者是走mysql 或者是走索引查询， 然后 通过json的形式 传回到 jsp 界面， 界面在解析这个 json 在将json中的值 赋值到 js生成的 div input 等 标签中 ， 下面我来上一些代码 以便于参考。

下面是 前端 jsp 界面 代码

1、首先界面自动加载一个function

<script type="text/javascript" language="javascript">
	window.onload=function(){
		//recompadata(1,'gengduo3');
		//many_querty3(1,'rdtj');
		pageload();
	}
</script>

2、然后 进入pageload()方法 进行逻辑 ，  这样一来 就 进入了 servlet

<pre name="code" class="html"><script type="text/javascript" language="javascript"> 

	function pageload()
	{
		jQuery.ajax({
		    url:"<%=request.getContextPath()%>/servlet/MainServlet", //这里是传入的 servlet
		    type:"post",
		    data:"status=movedata1_move&cid=<%=cid%>¤tPage="+currentPage,  //这里是穿进去的参数
			dataType:"json",
		    success:function(json){   //这个json是servlet川归来的 json   ， 并且接到json
		    	
		    		dataShow(json);   //将json传给 dataShow方法
		    	
		    }
		});
}
</script>


 

 

3、servlet中查询数据 并 存入 json
 

 

String selecttype = request.getParameter("selecttype"); //获取前端传过来的值
	List<PaUserTopic> recomPaDataList = new ArrayList<PaUserTopic>();//创建list   用来接收 通过mysql查询过来的 list
	String recomPadata = new ObjectMapper().writeValueAsString(recomPaDataList);
			JSONObject json = new JSONObject();//创建json
			json.put("recomPadata", recomPadata);//存入json
			out.print(json);//传回前端 jsp     json格式
			out.flush();
			out.close();//关闭sevlet
 

4、开始解析json  并同事 创建div  input 等标签， 并且把解析json中的值  赋到  div  input  标签上
 

 

		function dataShow(data){  //这里的 data 就是  传过来的 json
			var searchdata_div = document.getElementById("searchdata_div"); //这里是获取到 id为 searchdata_div的div
			var childs = searchdata_div.childNodes;//获取id为 searchdata_div的 子节点  "集合"
			for(var i = childs.length - 1; i >= 0; i--) {    
				searchdata_div.removeChild(childs[i]);  //清空所有子节点
			}
			
				var hitsjson = data.recomPadata;//获取json中为recomPadata的集合
					if(hitsjson.length>0){//这下面就开始 赋值了
//这里我要说的是：肯定会获取到很多个 hitsjson   ，  因为hitsjson一般是多组

						for(var j =0;j<hitsjson.length;j++){ //循环
							var sd = hitsjson[j];//取出每一组中的数值
							var div = document.createElement("div"); //创建一个div
							var table = document.createElement("table"); //创建一个table
							var tr = document.createElement("tr"); //创建一个tr
							var rj = document.createElement("td");//创建一个td
							div.setAttribute("style","float:left;");//给div增加 style="float:left"
							div.setAttribute("class","data_div");//给div增加 class="data_div"
							table.setAttribute("style","margin-left:10px;"); //给table增加 style="margin-left:10px"
							table.setAttribute("width",380);//
							rj.innerHTML = sd.paSysDictDataType.dtName;//获取recomPadata中paSysDictDataType中的dtName 并且赋值给rj(也就是上面创建的td)        json格式和数据  我会在后面给大家
							rj.width=40;//
							tr.appendChild(rj);//将rj(也就是td) 放到tr中
							table.appendChild(tr);//将tr让如table中
							div.appendChild(table);//将table放入div中
							searchdata_div.appendChild(div);//在讲div方入最外层的div中
						}
				}

			}
			var childs = searchdata_div.childNodes;//获取id为




5、json格式如下
 

 

 {"recomPadata":[{"paData":{"iid":null,"ititle":"上海：饭店提供10桌以上年夜饭需申报(图)","ipubtime":"2015-01-23","i_id":"142197390416022602","imedia":"北京晨报","iarea":null,"iurl":null,"iauthor":null,"ihot":null,"ifeel":null,"iwarn":null,"icollect":null,"iviews":null,"itopic":null,"itopicAuto":null,"itopicRes":null,"iinputtime":null,"itype":null,"irecom":null,"iabstract":null,"ipic":null,"iisleader":null,"iismine":null,"iconn":null,"icomefrom":null,"isource":null,"ikeywords":null},"paCusetTopic":null,"paSysDictDataType":{"dtId":null,"dtName":"新闻"}},"currentPage":1,"totalPage":1}
 


标签：
相关文章