這次帶給大家ajax在不刷新的情況下實現評論功能,ajax不刷新實現評論功能的注意事項有哪些,下面就是實戰案例,一起來看一下。
這是留言板的介面,當用戶點擊提交留言的時候,自動提交到我的留言下面
留言內容中為空,或者為灰色的“沒有填寫留言內容”都會彈出請填入留言內容,當使用者填入資料的會在右下角顯示目前留言的字數。
下面是javascript的程式碼
//去掉左右尖括号 并用去掉空格后的字符串替代显示 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); } });
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是ajax在不刷新的情況下實現評論功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!