前台 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查询过来的 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}