这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面
留言内容中为空,或者为灰色的“没有填写留言内容”都会弹出 请填写留言内容,当用户填写信息的会在右下角显示当前留言的字数。
下面是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); } });
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
ajax+mysql做出留言板的功能
在ajax中get与post的使用详解
以上就是ajax如何实现不刷新的评论功能的详细内容。
