<script>
function shouye(){
var data1 ={
}
var url = "http://localhost:8080/office/shouye";
$.ajax({
type: "post",
url: url,
data: data1,
cache: false,
async : false,
success: function (data ,textStatus, jqXHR)
{
//<tr><td style="width: 400px;">天津校长来我校参观交流2</td><td ><b id>[07-20]</b></td></tr>
if(data.code == 200){
//alert("加载成功啦");
for(var i = 0;i<data.shuzu.length;i++){
//工作动态
// alert(data.shuzu[i][4]);
if(2==data.shuzu[i][4]){
//append('<tr style="width: 600px;border-bottom: 1px dashed black; display: block; float:left;"><td style="float:left;"><a href="content.html?id='+data.shuzu[i][0]+'"style="text-decoration: none;">'+data.shuzu[i][1]+'</a></td><td style="float:right">'+'['+data.shuzu[i][2]+']'+'</td></tr>');
$("#first_low_right_table").append('<tr style="width: 500px;border-bottom: 1px dashed black; display: block; float:left;"><td style="float:left;"><a href="content.html?id='+data.shuzu[i][0]+'"style="text-decoration: none;"> '+data.shuzu[i][1]+'</td><td style="float:right;">'+data.shuzu[i][3]+'</td></tr>');
}
if(data.shuzu[i][4]== 5){
$("#second_left_low_table").append('<tr style="width: 340px;border-bottom: 1px dashed black; display: block; float:left;"><td style="float:left;"><a href="content.html?id='+data.shuzu[i][0]+'"style="text-decoration: none;"> '+data.shuzu[i][1]+'</td><td style="float:right;">'+'['+data.shuzu[i][3]+']'+'</td></tr>');
}
if(data.shuzu[i][4]== 3){
$("#second_right_low_table").append('<tr style="width: 500px;border-bottom: 1px dashed black; display: block; float:left;"><td style="float:left;"> <a href="content.html?id='+data.shuzu[i][0]+'"style="text-decoration: none;">'+data.shuzu[i][1]+'</td><td style="float:right;">'+'['+data.shuzu[i][3]+']'+'</td></tr>');
}
//诚聘英才
if(data.shuzu[i][4]== 4){
$("#third_right_low_table").append('<tr style="width: 500px;border-bottom: 1px dashed black; display: block; float:left;"><td style="float:left;"><a href="content.html?id='+data.shuzu[i][0]+'"style="text-decoration: none;"> '+data.shuzu[i][1]+'</td><td style="float:right;">'+'['+data.shuzu[i][3]+']'+'</td></tr>');
}
//下载专区
if(data.shuzu[i][4]== 6){
$("#third_left_low_table").append('<tr style="width: 340px;border-bottom: 1px dashed black; display: block; float:left;"><td style="float:left;"> <a href="content.html?id='+data.shuzu[i][0]+'"style="text-decoration: none;">'+data.shuzu[i][1]+'</td><td style="float:right;">'+'['+data.shuzu[i][3]+']'+'</td></tr>');
}
}
}else{
alert(data.message);
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert(typeof(errorThrown));
}
});
}
$(function(){
shouye();
})
</script>
下面是servlet.java代码:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("application/json; charset=utf-8");
int [] acttypeid = {2,3,4,5,6};
String [] str = new String[5];
String[] params = { "id" ,"title","content","createtime","acttypeid"};
List< Map<String,String> > maplist = new ArrayList<>();
String outstr = "{\"code\":200,\"message\":\"成功\",\"shuzu\":[" ;
for(int i = 0;i<acttypeid.length;i++) {
str[i] = "select * from newstable where acttypeid = "+acttypeid[i];
maplist = mysqlUtil.show(str[i], params);
if(i == acttypeid.length - 1) {
for(int j = 0; j < maplist.size(); j++) {
outstr +="[ "+ maplist.get(j).get("id")+",\""+maplist.get(j).get("title")+"\",\""+maplist.get(j).get("content")+"\",\""+maplist.get(j).get("createtime").substring(2,10)+"\","+maplist.get(j).get("acttypeid")+"]," ;
}
}
else {
for(int j = 0; j < maplist.size(); j++) {
outstr +="[ "+ maplist.get(j).get("id")+",\""+maplist.get(j).get("title")+"\",\""+maplist.get(j).get("content")+"\",\""+maplist.get(j).get("createtime").substring(2, 10)+"\","+maplist.get(j).get("acttypeid")+"]," ;
}
}
}
outstr += "[1,2,3,4,1000] ] }";
System.out.println(outstr);
response.getWriter().write(outstr);
}
解析: 因为首页会有几个模块需要加载,他们的文章类型都是已知的,而且都在数据库中都规定,一种类型的文章对用一种id,将所有的id放到一个数组里,循环遍历该数组,到数据库查找响应的信息,然后将查到的信息封装成json类型的字符串,通过response调用相应的方法,将数据传到前台,通过ajax判断是否接收成功,如果接受成功的话,拼接响应的字符串,将json字符串中的数据显示在页面响应的位置!
添加的内容中有添加一个链接,在链接后面附带上一个id,这个id就是这篇文章的id,通过这个id,新页面可以加载相应的内容。