ajax无刷新评论示例

下面就为大家带来一篇 ajax无刷新评论示例。学习还是有点帮助的，给大家做个参考吧。

这是留言板的界面，当用户点击提交留言的时候，自动提交到我的留言下面

留言内容中为空，或者为灰色的“没有填写留言内容”都会弹出 请填写留言内容，当用户填写信息的会在右下角显示当前留言的字数。

下面是javascript的代码

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 112

//去掉左右尖括号 并用去掉空格后的字符串替代显示 function replaceBrackets(id) {   var inputValue = $("#" + id).val();   while (inputValue.indexOf("<") != -1) {     inputValue = inputValue.replace("<", "[");   }   while (inputValue.indexOf(">") != -1) {     inputValue = inputValue.replace(">", "]");   }   while (inputValue.indexOf("&") != -1) {     inputValue = inputValue.replace("&", " ");   }   $("#" + id).val(inputValue); }    function replaceChar(name, char) {   var inputValue = $("#" + name).val();   while (inputValue.indexOf(char) != -1) {     inputValue = inputValue.replace(char, "");   }   return inputValue; }    $("#txtMessage").blur(function () {   $("#txtMessage").val(replaceChar("txtMessage", "<!--"));   if ($("#txtMessage").val() == "") {     document.getElementById("txtMessage").style.color = "#8C8C8C";     $("#txtMessage").val("没有填写留言内容");     return false;   }   replaceBrackets("txtMessage");   return true; });    $("#txtMessage").focus(function () {   if ($("#txtMessage").val() == "没有填写留言内容") {     document.getElementById("txtMessage").style.color = "#000000";     $("#txtMessage").val("");   } });    function txtanum(id, name)  //统计txta的输入字数 {   var maxl = 151;   var num = 150;   var content = $("#" + id).val();   content.slice(0, maxl);   var nowlength = content.length;   if (nowlength >= 0) {     if (nowlength < num)       $("#" + name).text(nowlength);     else       $("#" + name).text(num);   } else     $("#" + id).val(content.substring(0, maxl - 1));      if (nowlength == 0)     $("#" + name).text(0);      if (nowlength > num)     $("#" + id).val(content.substring(0, num)); }       var isSubmit = false; $('#subMessage').click(function () {      if (isSubmit) {     return;   }   isSubmit = true;   if ($("#txtMessage").val() == "没有填写留言内容" || $.trim($("#txtMessage").val()) == "") {     alert("请输入留言内容！");     isSubmit = false;     return;   }   $.ajax({     type: "POST",     url: app_param.path_context+"/user/member/msgboard/save",     data: { "context": ($("#txtMessage").val()) },     error: function () {       isSubmit = false;     },     success: function (data) {       if (data) {         addRow(data);         isSubmit=false;        $('#zanwu').hide();         document.getElementById("txtMessage").style.color = "#8C8C8C";     $("#txtMessage").val("没有填写留言内容");       }      }   });   function addRow(messageboard) {     var table = $("#tblmsg");     var html = [];     html.push("<tr>");     html.push("<td class='m_time'>");     html.push(messageboard.createDate);     html.push("</td>");     html.push("<td>");     html.push(messageboard.context);     html.push("</td>");     html.push("<td style='border-right: 0;' class='m_order_procz'>");     html.push("<a class='xxx' href='messagereply/"+messageboard.id+"'>查看</a>");     html.push("</td>");     html.push("</tr>");     html = html.join('');     table.append(html);   }    });