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

前沿：现在通常前后台交互的做法是 前端在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查询过来的 listString recomPadata = new ObjectMapper().writeValueAsString(recomPaDataList);JSONObject json = new JSONObject();//创建jsonjson.put("recomPadata", recomPadata);//存入jsonout.print(json);//传回前端 jsp     json格式out.flush();out.close();//关闭sevlet

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

function dataShow(data){  //这里的 data 就是  传过来的 jsonvar searchdata_div = document.getElementById("searchdata_div"); //这里是获取到 id为 searchdata_div的divvar 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"); //创建一个divvar table = document.createElement("table"); //创建一个tablevar tr = document.createElement("tr"); //创建一个trvar rj = document.createElement("td");//创建一个tddiv.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}