下面就为大家带来一篇 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);
  }
  
});

转载于:https://www.cnblogs.com/123456xfxf/p/7442032.html

ajax无刷新评论示例相关推荐

  1. ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论

    基于jquery实现ajax无刷新评论 发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...

  2. ajax无刷新评论的思路,ajax学习——ajax版无刷新评论（数据库）

    //Comment.htm 无刷新评论 type="text/javascript"> //加载评论 $(function() { $.post("GetComme ...

  3. html5拖拽图片批量ajax无刷新进度上传

    1.前端拖拽图片 之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...

  4. ThinkPHP+JQuery实现ajax无刷新登录验证（详解+相关问题）

    ThinkPHP+JQuery实现ajax无刷新登录验证 摘要: 使用原生javascript进行ajax实现无刷新更改页面内容的复杂性尽人皆知,而jquery对ajax传递进行了封装和优化,因此通过 ...

  5. Ajax无刷新实现图片切换特效

    1.页面cs代码 using System; using System.Data; using System.Configuration; using System.Web; using System ...

  6. JAVA EE 中之AJAX 无刷新地区下拉列表三级联动

    JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  7. JQuery 总结（8）Ajax 无刷新技术

    Ajax  无刷新技术  [ 有get 和post  一一对应] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $(".delete& ...

  8. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  9. .net MvcPager+Ajax无刷新分页

    .net  MvcPager+Ajax无刷新分页百度网盘链接: https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw 1.新建Asp.net  Web项目,重 ...

最新文章

  1. Go runtime的调度器
  2. 深度学习的实用层面 —— 1.10 梯度消失与梯度爆炸
  3. 面向串口编程java_Java串口编程例子
  4. 《编码规范和测试方法——C/C++版》学习笔记 ·002
  5. matlab的simin用法,在Maltlab 的simulink中怎么输入讯号
  6. 软件工程专业学python_笨办法学Python（0）
  7. Maven-Eclipse使用maven创建HelloWorld Java项目，maven常用的命令解析
  8. Julia: map,reduce,mapreduce
  9. 关于AE中出现 “对 COM 组件的调用返回了错误 HRESULT E_FAIL” 错误
  10. python实现图像二分类特异度（numpy）
  11. 【重识云原生】第六章容器基础6.4.10.4节——StatefulSet实操案例-使用 StatefulSet 部署Cassandra
  12. JavaScript首次体验
  13. html鼠标经过晃动代码,css3让div随鼠标移动而抖动起来
  14. MT4软件IOS版如何下载
  15. 存储过程(数组参数、for循环、拼接的动态sql游标、merge into)
  16. html网易云客堂,网易云课堂 HTML5 播放器样式调整
  17. 改进我的人人农场收菜外挂
  18. 【Python卸载】与Windows上【Anaconda安装】
  19. 对于TGA格式文件的分析
  20. sparkstreaming处理kafka数据，数据积压问题解决方案

热门文章

  1. 在Linux下安装和使用MySQL（转）
  2. Asp.net在线备份、压缩和修复Access数据库
  3. 阿姆斯特丹大学博士招生，月薪2.3K-3K 欧，QUVA Lab 计算机视觉与机器学习方向...
  4. 波士顿动力再发逆天机器人视频：倒立、360°旋转、空中劈叉，真是秀儿
  5. 2021 年软件工程现状：Python 或将成为第一大编程语言，中国开源涨势最猛
  6. Python学得好，升职加薪下班早
  7. 收藏 | 深度学习之Numpy基础入门教程！
  8. 带你自学Python系列（十）：用户输入input函数详解
  9. Python调用C函数的方法以及如何编写Python的C扩展
  10. 在Linux系统中，使用useradd命令新建用户后，登录该用户时shell开头为$，不显示用户名和路径，如下：...