ajax+sevrlet+html+数据库 实现前后端的简单交互

<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,新页面可以加载相应的内容。

猜你喜欢

转载自blog.csdn.net/IBLiplus/article/details/81293555
今日推荐