jquery+ajax+JSON显示帖子-仿知乎个人网站fourask（三）

HTML:划块div class="content"

JS代码

	$.ajax({  //ajax显示发帖
	  url:'show.jsp',
	  type:'POST', 
	  success:function(response,status,xhr){ 
	     var json=$.parseJSON(response);
	     var html='';
	     var arr=[]; 
	     for(var i=0;i<json.length;i++){ 
	         html+='<h4>'+json[i].user+'发表于'+json[i].date+'</h4><h3>'+ 
	               json[i].title+'</h3><div class="c_editor">'+json[i].content+
	               '</div><div class="c_bottom">0条评论<span class="down">显示全部</span><span class="up">收起</span></div><hr noshade="noshade" size="1"/>'; } 
	     $('.content').append(html); 
	     $.each(   //jQuery 遍历
	       $('.c_editor'),function(index,value){ 
	         arr[index]=$(value).height();
	         if($(value).height()>200){ 
	              $(value).next('.c_bottom').find('.up').hide();} 
	         $(value).height(155);}); 
	     $.each($('.c_bottom .down'),function(index,value){ 
	       $(this).click(function(){ 
	         $(this).parent().prev().height(arr[index]);
	         $(this).hide(); 
	         $(this).parent().find('.up').show();});}); 
	     $.each($('.c_bottom .up'),function(index,value){ 
	       $(this).click(function(){ 
	         $(this).parent().prev().height(155);
	         $(this).hide(); 
	         $(this).parent().find('.down').show();
	         });
	        });
	      },
	});

CSS

.content h4{ color:#666; font-weight:normal;} 
.content h3{ color:#369;}
.content .c_editor{ color:#333; line-height:180%;/*height:110px;*/overflow:hidden;} 
.content .c_bottom{ padding:5px 0 0 0;} 
.content hr{ color:#ccc;height:1px;} 
.content .up{ float:right;color:#369;cursor:pointer;} 
.content .down{ float:right;color:#369;cursor:pointer;}

show.jsp发送json,数据库根据需要设计

    <%@ page language="java" import="java.util.*,java.io.*" %>
    <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
    <%@ page import ="java.sql.*" %> 
    <%@ page import ="org.json.JSONObject,org.json.JSONArray" %> 
    <%@ page import="com.mysql.jdbc.Driver" %>
<%!
  public JSONObject getJsonObj(String title,String tvalue,String content,String cvalue,String user,String uvalue,String date,String dvalue) {  
    JSONObject jsonobj = new JSONObject();  
    jsonobj.put(title,tvalue);  
    jsonobj.put(content,cvalue);  
    jsonobj.put(user,uvalue);  
    jsonobj.put(date,dvalue);  
    return jsonobj;  
}  
%>  
<%  
   request.setCharacterEncoding("UTF-8");  
   response.setCharacterEncoding("UTF-8");  
   response.setContentType("text/html; charset=utf-8");  
%>  
<% 

try 
{ 
/** 连接数据库参数 **/ 
String driverName = "com.mysql.jdbc.Driver"; //驱动名称 
String DBUser = "root"; //mysql用户名 
String DBPasswd = ""; //mysql密码 
String DBName = "zhiwen"; //数据库名 
JSONArray js = new JSONArray();  
JSONObject value=new JSONObject();


String connUrl = "jdbc:mysql://localhost/" + DBName + "?user=" + DBUser + "&password=" + DBPasswd + "&useUnicode=true&characterEncoding=UTF-8"; 
Class.forName(driverName).newInstance(); 
Connection conn = DriverManager.getConnection(connUrl); 
Statement stmt = conn.createStatement(); 
String query_sql = "select title,content,user,date from question order by date desc limit 0,5"; 

try { 
ResultSet rs = stmt.executeQuery(query_sql); 
while(rs.next()) { 
	js.put(getJsonObj("title",rs.getString("title"),"content",rs.getString("content"),"user",rs.getString("user"),"date",rs.getString("date"))); // 放一个字符串
}
}catch(Exception e) { 
e.printStackTrace(); 
} 
response.getWriter().write(js.toString());
//rs.close(); 
stmt.close(); 
conn.close(); 
}catch (Exception e) { 
e.printStackTrace(); 
} 
%> 

结果展示