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); } });
(资源库 www.zyku.net)
上一篇:Ajax请求中的async:false和async:true的差异
栏 目:AJAX
本文标题:ajax无刷新评论功能
本文地址:https://www.zyku.net/ajax/561.html
您可能感兴趣的文章
- 03-31利用ajax+php实现商品价格计算
- 03-30thinkphp5 使用H-ui+ajax 提交数据
- 07-27PHP自定义函数判断是否为Get、Post及Ajax提交的方法
- 07-18使用Ajax方法实现Form表单的提交及注意事项
- 07-18Ajax的特性及乱码问题
- 07-12jQuery+Ajax请求本地数据加载商品列表页并跳转详情页
- 06-26Ajax提交表单并接收json实例代码
- 04-05Ajax验证用户名或昵称是否已被注册
- 03-15thinkPHP+ajax实现统计页面pv浏览量的方法
- 02-18ThinkPHP中ajax使用实例教程
- 02-20Fedora下Zend Studio 6.1.2 的配置
- 09-24小米平板5设置悬浮球教程分享
- 04-02SiteServer找回管理员帐号密码教程
- 01-12泡椒漫画-泡椒漫画应用软件功能介绍
- 07-05Linux mtools命令
- 01-14今日喝水提醒-今日喝水提醒应用软件功
- 01-08学知题题库-学知题题库应用软件功能介
- 12-18HTML <select> 标签
- 08-07Vultr关注转发Twitter领取3美金活动
- 10-15goodnotes5字体尺寸调整方法介绍
最近更新
阅读排行
猜你喜欢
- 04-09jQuery实现鼠标拖动div改变位置、大小
- 09-13vivox70pro如何连接手机
- 01-11八门水印相机打卡-八门水印相机打卡应
- 02-15DedeCMS织梦模板标签调用大全
- 01-29ios14开启优化充电方法
- 10-13华为mate30地震预警功能在哪里
- 01-10全能WiFi助手尚麦-全能WiFi助手尚麦应
- 07-07opporeno6pro开启微信加密方法分享
- 01-12画画树-画画树应用软件功能介绍
- 05-06opporeno5开启流量显示操作方法