[关闭]
@liayun 2016-05-13T04:01:07.000000Z 字数 6820 阅读 2328

知问前端--Ajax显示

知问前端

本文需要从数据库里获取相应数据，然后转换为JSON模式，最终在页面上显示出来。我们希望显示的时候，隐藏大部分，显示摘要，具有切换功能。

一、Ajax显示

从服务器端获取数据，转化为JSON格式。
show_content.php：

  1. <?php
  2.     require 'config.php';
  4.     $query = mysql_query("SELECT title,content,user,date FROM question ORDER BY date DESC LIMIT 0,5") or die('SQL 错误！');
  6.     $json = '';
  8.     while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
  9.     //json格式转码
  10.         foreach ( $row as $key => $value ) {
  11.             $row[$key] = urlencode(str_replace("\n","", $value));
  12.             $row[$key] = urlencode(str_replace("\t","", $value));
  13.         }
  14.         $json .= urldecode(json_encode($row)).',';
  15.         //$json .= json_encode($row).','; //得到json格式
  16.         //print_r($row); //以php数组的形式显示出来，javascript不能直接用，那么最好将其保存为json格式
  17.     }
  19.     //echo $json;
  21.     echo '['.substr($json, 0, strlen($json) - 1).']'; //一个json数组，一个数组有3个对象，每个对象就是一个json
  23.     mysql_close();
  24. ?>

为了从数据库表question中取出的数据能在页面中有组织的显示出来，所以可以假设这样组织：

  1. <div id="main">
  2.     <div class="main_left">
  3.         <div id="tabs">
  4.             <ul>
  5.                 <li><a href="tab1.html">tab1</a></li>
  6.                 <li><a href="tab2.html">tab2</a></li>
  7.                 <li><a href="tab3.html">tab3</a></li>
  8.             </ul>
  9.         </div>
  10.         <div class="content">
  11.             <h4>li 发表于 2016-05-07</h4>
  12.             <h3>外貌和魅力方面被打击该如何调整心态？</h3>
  13.             <div class="editor">
  14.                 123
  15.             </div>
  16.             <div class="bottom">0条评论 <span class="down">显示全部</span><span class="up">收起</span></div>
  17.             <hr noshade="noshade" size="1" />
  18.         </div>
  19.     </div>
  20.     <div class="main_right">
  21.         <div id="accordion">
  22.             <h3>菜单1</h3>
  23.             <div><p>内容1</p><p>内容1</p></div>
  24.             <h3>菜单2</h3>
  25.             <div>内容2</div>
  26.             <h3>菜单3</h3>
  27.             <div>内容3</div>
  28.         </div>
  29.     </div>
  30. </div>

我们重点关注其中的class="content"的div，即：

  1. <div class="content">
  2.     <h4>li 发表于 2016-05-07</h4>
  3.     <h3>外貌和魅力方面被打击该如何调整心态？</h3>
  4.     <div class="editor">
  5.         123
  6.     </div>
  7.     <div class="bottom">0条评论 <span class="down">显示全部</span><span class="up">收起</span></div>
  8.     <hr noshade="noshade" size="1" />
  9. </div>

接下来可以添加css样式：

  1. .content h4 {
  2.     color:#666;
  3.     font-weight:normal;
  4. }
  5. .content h3 {
  6.     color:#369;
  7. }
  8. .content .editor {
  9.     line-height: 180%;
  10.     height: 155px;
  11.     overflow: hidden;
  12.     color:#333;
  13. }
  14. .content .bottom {
  15.     padding:5px 0 0 0;
  16. }
  17. .content hr {
  18.     color:#ccc;
  19.     height:1px;
  20. }
  21. .content .up {
  22.     float:right;
  23.     color:#369;
  24.     cursor:pointer;
  25. }
  26. .content .down {
  27.     float:right;
  28.     color:#369;
  29.     cursor:pointer;
  30. }

我们尤其应注意.content .editor选择符中的属性height，我们是以155px的高度作为临界线的。

  1. 如果问题描述的原始高度> 155px，那么<span class="up">收起</span>隐藏，<div class="editor"></div>高度置为155px。
  2. 如果问题描述的原始高度<= 155px，<span class="down">显示全部</span>和<span class="up">收起</span>均隐藏，<div class="editor"></div>高度就为问题描述的原始高度。

如图所示：

知问前端--问题描述

如果按照这个思路，那么
HTML部分代码：

  1. <div id="main">
  2.     <div class="main_left">
  3.         <div id="tabs">
  4.             <ul>
  5.                 <li><a href="tab1.html">tab1</a></li>
  6.                 <li><a href="tab2.html">tab2</a></li>
  7.                 <li><a href="tab3.html">tab3</a></li>
  8.             </ul>
  9.         </div>
  10.         <div class="content">
  12.         </div>
  13.     </div>
  14.     <div class="main_right">
  15.         <div id="accordion">
  16.             <h3>菜单1</h3>
  17.             <div><p>内容1</p><p>内容1</p></div>
  18.             <h3>菜单2</h3>
  19.             <div>内容2</div>
  20.             <h3>菜单3</h3>
  21.             <div>内容3</div>
  22.         </div>
  23.     </div>
  24. </div>

CSS样式：

  1. .content h4 {
  2.     color:#666;
  3.     font-weight:normal;
  4. }
  5. .content h3 {
  6.     color:#369;
  7. }
  8. .content .editor {
  9.     line-height: 180%;
  10.     overflow: hidden;
  11.     color:#333;
  12. }
  13. .content .bottom {
  14.     padding:5px 0 0 0;
  15. }
  16. .content hr {
  17.     color:#ccc;
  18.     height:1px;
  19. }
  20. .content .up {
  21.     float:right;
  22.     color:#369;
  23.     cursor:pointer;
  24. }
  25. .content .down {
  26.     float:right;
  27.     color:#369;
  28.     cursor:pointer;
  29. }

jQuery代码如下：

  1. $.ajax({
  2.     url : "show_content.php",
  3.     type : "post",
  4.     success : function(response, status, xhr) {
  5.         //alert(response); //取出数据 
  6.         //alert(typeof response); //string
  7.         //alert(typeof $.parseJSON(response)); //object
  8.         //alert($.parseJSON(response)); //[object Object],[object Object],[object Object]
  9.         var json = $.parseJSON(response); //parseJSON方法有问题
  10.         var html = "";
  11.         var arr = [];
  12.         //alert(json.length); //3
  13.         $.each(json, function(index, value) {
  14.             //alert(value.title);
  15.             //alert(index);
  16.             html += "<h4>" + value.user + " 发表于 " + value.date + "</h4><h3>"+value.title+"</h3><div class='editor'>" + value.content + "</div><div class='bottom'>0条评论 <span class='down'>显示全部</span><span class='up'>收起</span></div><hr noshade='noshade' size='1' />"
  17.         });
  18.         $(".content").append(html);
  20.         $.each($(".editor"), function(index, value) {
  21.             //arr[index] = value;
  22.             //alert($(value).height());
  23.             arr[index] = $(value).height(); //每个内容区块的原始高度
  24.             if ($(value).height() > 155) {
  25.                 $(value).next(".bottom").find(".up").hide();
  26.                 $(value).height(155);
  27.             } else {
  28.                 $(value).next(".bottom").find(".up").hide();
  29.                 $(value).next(".bottom").find(".down").hide();
  30.             }
  31.         });
  33.         $.each($(".bottom .down"), function(index, value) {
  34.             $(this).click(function() {
  35.                 $(this).parent().prev().height(arr[index]);
  36.                 $(this).hide();
  37.                 $(this).parent().find(".up").show();
  38.             });
  39.         });
  41.         $.each($(".bottom .up"), function(index, value) {
  42.             $(this).click(function() {
  43.                 $(this).parent().prev().height(155);
  44.                 $(this).hide();
  45.                 $(this).parent().find(".down").show();
  46.             });
  47.         });
  48.     }
  49. });

注意：可能出现出现两个问题。
问题一：

  1. 此时代码$.parseJSON(response);可能报错，关于这个问题，可以参考SyntaxError: JSON.parse: bad control character in string literal...，在此并不赘述。
  2. 可能会造成溢出的字体成半截形式。

二、使用字符串截取

由于第一种方法，可能会造成溢出的字体成半截形式。所以，我们将再使用另外一套思路，字符串截取的方式来实现这个功能。
HTML部分代码不变，仍为：

  1. <div id="main">
  2.     <div class="main_left">
  3.         <div id="tabs">
  4.             <ul>
  5.                 <li><a href="tab1.html">tab1</a></li>
  6.                 <li><a href="tab2.html">tab2</a></li>
  7.                 <li><a href="tab3.html">tab3</a></li>
  8.             </ul>
  9.         </div>
  10.         <div class="content">
  12.         </div>
  13.     </div>
  14.     <div class="main_right">
  15.         <div id="accordion">
  16.             <h3>菜单1</h3>
  17.             <div><p>内容1</p><p>内容1</p></div>
  18.             <h3>菜单2</h3>
  19.             <div>内容2</div>
  20.             <h3>菜单3</h3>
  21.             <div>内容3</div>
  22.         </div>
  23.     </div>
  24. </div>

CSS样式变为：

  1. .content h4 {
  2.     color:#666;
  3.     font-weight:normal;
  4. }
  5. .content h3 {
  6.     color:#369;
  7. }
  8. .content .editor {
  9.     line-height: 180%;
  10.     color:#333;
  11. }
  12. .content .bottom {
  13.     padding:5px 0 0 0;
  14. }
  15. .content hr {
  16.     color:#ccc;
  17.     height:1px;
  18. }
  19. .content .up {
  20.     float:right;
  21.     color:#369;
  22.     cursor:pointer;
  23. }
  24. .content .down {
  25.     font-weight: normal;
  26.     color:#369;
  27.     cursor:pointer;
  28. }

jQuery代码变为：

  1. $(function() {
  2.     $.ajax({
  3.         url : "show_content.php",
  4.         type : "post",
  5.         success : function(response, status, xhr) {
  6.             //alert(response); //取出数据 
  7.             //alert(typeof response); //string
  8.             //alert(typeof $.parseJSON(response)); //object
  9.             //alert($.parseJSON(response)); //[object Object],[object Object],[object Object]
  10.             var json = $.parseJSON(response); //parseJSON方法有问题
  11.             var html = "";
  12.             var arr = [];
  13.             var summary = [];
  15.             //alert(json.length); //3
  16.             $.each(json, function(index, value) {
  17.                 //alert(value.title);
  18.                 //alert(index);
  19.                 html += "<h4>" + value.user + " 发表于 " + value.date + "</h4><h3>"+value.title+"</h3><div class='editor'>" + value.content + "</div><div class='bottom'>0条评论 <span class='up'>收起</span></div><hr noshade='noshade' size='1' />"
  20.             });
  21.             $(".content").append(html);
  23.             $.each($(".editor"), function(index, value) {
  24.                 arr[index] = $(value).html();
  25.                 summary[index] = arr[index].substr(0, 200);
  27.                 if (summary[index].substring(199, 200) == "<") {
  28.                     summary[index] = replacePos(summary[index], 200, "");
  29.                 }
  30.                 if (summary[index].substring(198, 200) == "</") {
  31.                     summary[index] = replacePos(summary[index], 200, "");
  32.                     summary[index] = replacePos(summary[index], 199, "");
  33.                 }
  36.                 if(arr[index].length > 200) {
  37.                     summary[index] += '...<span class="down">显示全部</span>'; //一个大的问题，显示全部为动态添加进去，隐藏掉再添加进去的时候，click事件会失效
  38.                     $(value).html(summary[index]);
  39.                 }
  40.                 $(".bottom .up").hide();
  41.             });
  43.             //动态绑定，用委托绑定处理
  44.             $.each($(".editor"), function(index, value) {
  45.                 $(this).on("click", ".down", function() {
  46.                     $(".editor").eq(index).html(arr[index]);
  47.                     $(this).hide();
  48.                     $(".bottom .up").eq(index).show();
  49.                 });
  50.             });
  52.             //统一处理
  53.             $.each($(".bottom"), function(index, value) {
  54.                 $(this).on("click", ".up", function() {
  55.                     $(".editor").eq(index).html(summary[index]);
  56.                     $(this).hide();
  57.                     $(".editor .down").eq(index).show();
  58.                 });
  59.             });
  60.         }
  61.     });
  62. });
  63. //替换特殊字符的函数
  64. function replacePos(strObj, pos, replaceText) {
  65.     return strObj.substr(0, pos-1) + replaceText + strObj.substring(pos, strObj.length);
  66. }

问题：显示全部为动态添加进去，隐藏掉再添加进去的时候，click事件会失效，所以需要使用用委托绑定处理。
显示效果：

知问前端--问题描述1

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注