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

知问前端--Ajax显示

知问前端


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

一、Ajax显示

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

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

为了从数据库表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">
  11. </div>
  12. </div>
  13. <div class="main_right">
  14. <div id="accordion">
  15. <h3>菜单1</h3>
  16. <div><p>内容1</p><p>内容1</p></div>
  17. <h3>菜单2</h3>
  18. <div>内容2</div>
  19. <h3>菜单3</h3>
  20. <div>内容3</div>
  21. </div>
  22. </div>
  23. </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);
  19. $.each($(".editor"), function(index, value) {
  20. //arr[index] = value;
  21. //alert($(value).height());
  22. arr[index] = $(value).height(); //每个内容区块的原始高度
  23. if ($(value).height() > 155) {
  24. $(value).next(".bottom").find(".up").hide();
  25. $(value).height(155);
  26. } else {
  27. $(value).next(".bottom").find(".up").hide();
  28. $(value).next(".bottom").find(".down").hide();
  29. }
  30. });
  31. $.each($(".bottom .down"), function(index, value) {
  32. $(this).click(function() {
  33. $(this).parent().prev().height(arr[index]);
  34. $(this).hide();
  35. $(this).parent().find(".up").show();
  36. });
  37. });
  38. $.each($(".bottom .up"), function(index, value) {
  39. $(this).click(function() {
  40. $(this).parent().prev().height(155);
  41. $(this).hide();
  42. $(this).parent().find(".down").show();
  43. });
  44. });
  45. }
  46. });

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

  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">
  11. </div>
  12. </div>
  13. <div class="main_right">
  14. <div id="accordion">
  15. <h3>菜单1</h3>
  16. <div><p>内容1</p><p>内容1</p></div>
  17. <h3>菜单2</h3>
  18. <div>内容2</div>
  19. <h3>菜单3</h3>
  20. <div>内容3</div>
  21. </div>
  22. </div>
  23. </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 = [];
  14. //alert(json.length); //3
  15. $.each(json, function(index, value) {
  16. //alert(value.title);
  17. //alert(index);
  18. 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' />"
  19. });
  20. $(".content").append(html);
  21. $.each($(".editor"), function(index, value) {
  22. arr[index] = $(value).html();
  23. summary[index] = arr[index].substr(0, 200);
  24. if (summary[index].substring(199, 200) == "<") {
  25. summary[index] = replacePos(summary[index], 200, "");
  26. }
  27. if (summary[index].substring(198, 200) == "</") {
  28. summary[index] = replacePos(summary[index], 200, "");
  29. summary[index] = replacePos(summary[index], 199, "");
  30. }
  31. if(arr[index].length > 200) {
  32. summary[index] += '...<span class="down">显示全部</span>'; //一个大的问题,显示全部为动态添加进去,隐藏掉再添加进去的时候,click事件会失效
  33. $(value).html(summary[index]);
  34. }
  35. $(".bottom .up").hide();
  36. });
  37. //动态绑定,用委托绑定处理
  38. $.each($(".editor"), function(index, value) {
  39. $(this).on("click", ".down", function() {
  40. $(".editor").eq(index).html(arr[index]);
  41. $(this).hide();
  42. $(".bottom .up").eq(index).show();
  43. });
  44. });
  45. //统一处理
  46. $.each($(".bottom"), function(index, value) {
  47. $(this).on("click", ".up", function() {
  48. $(".editor").eq(index).html(summary[index]);
  49. $(this).hide();
  50. $(".editor .down").eq(index).show();
  51. });
  52. });
  53. }
  54. });
  55. });
  56. //替换特殊字符的函数
  57. function replacePos(strObj, pos, replaceText) {
  58. return strObj.substr(0, pos-1) + replaceText + strObj.substring(pos, strObj.length);
  59. }

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

知问前端--问题描述1

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