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

ajax无刷新评论示例的更多相关文章

  1. 案例(JQuery的ajax无刷新评论)

    CommentsTest.html代码: <head> <meta http-equiv="Content-Type" content="text/ht ...

  2. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  3. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  4. Ajax无刷新提交

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  6. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  7. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  8. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  9. Ajax无刷新提交表单和显示

    ajax无刷新表单提交:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

随机推荐

  1. HTML DOM setTimeout() 方法

    转自:http://www.w3school.com.cn/jsref/met_win_settimeout.asp 1.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. &l ...

  2. 异常：Project configuration is not up-to-date with pom.xml解决方案

    转自:https://www.cnblogs.com/zhujiabin/p/6343423.html 1. Description    Resource    Path    Location   ...

  3. python 基础 列表 字符串转换

    1. 字符串转列表 str1 = "hi hello world" print(str1.split(" "))输出:['hi', 'hello', 'worl ...

  4. linux命令-bzip2压缩

    gzip和bzip2 都是压缩命令  区别是压缩算法不一样  一般bzip2压缩的效率高  都不能压缩目录 bzip2 压缩 [root@wangshaojun ~]# bzip2 install.l ...

  5. jquery.html5uploader.js 上传控件

    插件地址:http://blog.csdn.net/never_say_goodbye/article/details/8598521 先上个效果图: 相比来说,效果还是很不错的 使用MVC3做服务器 ...

  6. mysql四个默认数据库

    1.Master数据库  Master数据库记录了Sqlserver所有的服务器级系统信息,所有的注册帐户和密码,以及所有的系统设置信息,还记录了所有用户定义数据库的存储位置和初始化信息. 2.Tem ...

  7. 人工智能: 自动寻路算法实现(三、A*算法)

    博客转载自:https://blog.csdn.net/kwame211/article/details/78139506 本篇文章是机器人自动寻路算法实现的第三章.我们要讨论的是一个在一个M×N的格 ...

  8. SpringMVC的国际化

    关于SpringMVC的国际化,http://www.cnblogs.com/liukemng/p/3750117.html这篇文章已经讲的很好了.它讲了有如下几种国际化方式 1:基于Http的hea ...

  9. 解析Xml文件的三种方式及其特点

    解析Xml文件的三种方式 1.Sax解析(simple api  for xml) 使用流式处理的方式,它并不记录所读内容的相关信息.它是一种以事件为驱动的XML API,解析速度快,占用内存少.使用 ...

  10. CSS 框模型概述

    在 CSS 中,width 和 height 指的是内容区域的宽度和高度. 增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 假设框的每个边上有 10 个像素的外边距和 5 ...