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

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

前沿：现在通常前后台交互的做法是 前端在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}
 


标签：
相关文章