thinkphp Ajax Implementation Comment reply

This is the controller code.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

<?phpnamespace home\controller;use Think\controller;class Indexcontroller extends Controller {public Function index () {$num = M (' comment ')->count ();//Get the total number of comments $this->assign (' num ', $num); $data =array (); $data = $this Getcommlist ();//Get Comment list $this->assign ("Commlist", $data); $this->display (' Index ');}  /*** Add comment */public function addcomment () {  $data =array (); if (Isset ($_post["comment")) && (!empty ( $_post["comment"])) {$cm = Json_decode ($_post["comment"],true);//through the second parameter true, convert the JSON string to a key value array $cm[' Create_time ']= Date (' y-m-d h:i:s ', Time ()), $newcm = m (' comment '), $id = $newcm->add ($cm);  $cm ["id"] = $id; $data = $cm;  $num = M (' comment ')->count ();//The total number of statistical comments $data[' num ']= $num;  }else{$data ["error"] = "0";}   echo Json_encode ($data);}    /*** recursive get Comment list */protected function getcommlist ($parent _id = 0,& $result = Array ()) {$arr = M (' Comment ')->where ("parent_id = '". $parent _id. "") ->order ("Create_time desc")->select (); if (empty ($arr)) {RETurn array ();} foreach ($arr as $cm) {$THISARR =& $result []; $cm ["children"] = $this->getcommlist ($cm ["id"], $THISARR); $THISARR = $CM;} return $result;}  }

This is the JavaScript code.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

$ (function () { //Click submit Comment Content $ (' body '). Delegate ('. Comment-submit ', ' click ', function () {var content = $.trim ($ (this) . Parent (). Prev (). Children ("textarea"). Val ()); Gets the current comment content by the layout structure $ (this). Parent (). Prev (). Children ("textarea"). Val ( "");//Empty the input box if ("" ==content) {alert ("The comment cannot be blank!") after getting the content.} Else{var cmdata = new Object (); cmdata.parent_id = $ (this). attr ("parent_id");//Superior Comment idcmdata.content = content; Cmdata.nickname = "tourist";//test Data Cmdata.head_pic = "/public/images/default.jpg";//test data var Replyswitch = $ (this). attr (" Replyswitch ");//Get reply Switch Lock properties  $.ajax ({type:" POST ", url:"/index.php/home/index/addcomment ", Data:{comment: Json.stringify (cmdata)},datatype: "JSON", success:function (data) {if (typeof (data.error) = = "undefined") {$ (". Comment-reply "). Remove ()//delete all replies that already exist div//update the total number of comments $ (". Comment-num "). Children (" span "). HTML (data.num+" comment ") ;//Show new comments var newli = ""; if (cmdata.parent_id = = "0") {//Post a first-level comment, add to a ul list newli = "<li comment_id= '" +data.id+ "> <div ><div></div><div class= ' cm ' ><div class= ' cm-header ' ><span> ' +data.nickname+ ' </span><span> "+data.create_time+" </span></div><div class= ' cm-content ' ><p> "+ data.content+ "</p></div><div class= ' cm-footer ' ><a class= ' comment-reply ' comment_id= '" + data.id+ "' href= ' javascript:void (0); ' > Reply </a></div></div></div><ul class= ' children ' ></ul></li> '; $ (". Comment-ul "). Prepend (Newli);} else{//otherwise added to the corresponding child UL list if (' off ' ==replyswitch) {//Check out the reply-to-close lock exists, that is, the three-level comment no longer provides a reply function Newli = "<li comment_id= '" +data.id+ " ><div ><div></div><div class= ' children-cm ' ><div class= ' cm-header ' ><span> ' +data.nickname+ ' </span><span> ' + data.create_time+ "</span></div><div class= ' cm-content ' ><p>" +data.content+ "</p> </div><div class= ' Cm-footer ' ></div></div>&Lt;/div><ul class= ' children ' ></ul></li> ';} else{//Two Comment reply button to add Reply close lock Property Newli = "<li comment_id= '" +data.id+ "' ><div ><div></div><div class= ' children-cm ' ><div class= ' Cm-header ' ><span> "+data.nickname+" </span><span> "+data.create_time+" </span></div><div class= ' cm-content ' ><p> ' +data.content+ ' </p></div><div class= ' cm-footer ' ><a class= ' Comment-reply ' comment_id= ' "+data.id+" ' href= ' javascript:void (0); ' replyswitch= ' off ' > Reply </a></div> </div></div><ul class= ' children ' ></ul></li> ';} $ ("li[comment_id= '" +data.parent_id+ "']"). Children ("ul"). Prepend (Newli);} &NBSP;}ELSE{//has error message alert (DATA.ERROR);}  }});}       //Click the Reply button to show or hide the reply input box $ ("Body"). Delegate (". Comment-reply", "click", Function () {if ($ (this). Next (). length>0) {//To determine that the reply div already exists, to remove the $ (this). Next (). Remove (); Else{//Add reply div$ (". Comment-reply"). Next () remove ();//Delete all replies that already exist div//add the current reply Divvar parent_id = $ (this). attr ("comment_id ");//The comment to reply id var divhtml =" "; if (' Off ' ==$ (this). attr (" Replyswitch ") {///Level two comment reply) three comments no longer provide a reply function, attach the close attribute to the" Submit reply "button "divhtml =" <div class= ' div-reply-txt ' style= ' width:98%;p adding:3px; ' replyid= ' 2 ' ><div><textarea class= ' txt-reply ' replyid= ' 2 ' style= ' width:100%; height:60px; ' ></textarea></div><div style= ' margin-top:5px;text-align:right; ' ><a class= ' comment-submit ' parent_id= ' "+parent_id+" ' style= ' font-size:14px;text-decoration:none; ' href= ' Javascript:void (0); ' replyswitch= ' off ' > Submit reply </a></div></div> ';} else{divhtml = "<div class= ' div-reply-txt ' style= ' width:98%;p adding:3px; ' replyid= ' 2 ' ><div><textarea class= ' txt-reply ' replyid= ' 2 ' style= ' width:100%; height:60px; ' ></textarea></div><div style= ' margin-top:5px;text-align:right; ' ><a class= ' comment-submit ' parent_id= ' "+parent_id+" ' styLe= ' Font-size:14px;text-decoration:none; ' href= ' javascript:void (0); ' > Submit reply </a></div></div> ";} $ (this). After (divhtml);}});  })

This is the page style code  .comment-filed{width:640px;margin:0 auto;}  .comment-num{text-align:right;font-size:14px;}. div-txt-submit{text-align:right;margin-top:8px; } .comment-submit{ margin-top:15px; Text-decoration:none;color: #fff;p adding:5px;font-size:14px;}  .txt-commit{border:1px solid blue;width:620px;height:60px;padding:10px;}  .txt-reply{width:100%;height:60px;}    .comment-filed-list{margin-top:20px;}  .comment-list{margin-top:2px;width:herit;height:50px;border-top:1px solid Gray;}  .comment-ul{list-style:none;padding-left:0;}  .head-pic{width:40px;height:40px;}  .cm{position:relative;top:0px;left:40px;top:-40px;width:600px;}  .cm-header{padding-left:5px;}  .cm-content{padding-left:5px;}  .cm-footer{padding-bottom:15px;text-align:right;border-bottom:1px dotted #CCC;}  .comment-reply{text-decoration:none;color:gray;font-size:14px;}  .children{list-style:none; padding-left:0;margin-left:40px;}  .children-cm{position:relative;left:40px;top:-40px;width:90%;}   This is the page layout code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 1 113 117 118 119-121 122 123 124

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

thinkphp Ajax Implementation Comment reply