下面就为大家带来一篇 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. samba server导出/datasmb/目录;samba client挂载/data/至本地的/mydata目录;本地的mysqld或mariadb服务的数据目录设置为/mydata, 要求服务能正常启动,且可正常 存储数据;

    实验环境:CentOS7 主机(mini2) :172.16.250.247  主机名::localhost 客户端(mini3):172.16.253.99  主机名:pxe99 #主机:配置文件的 ...

  2. 利用httpclient和mysql模拟搜索引擎

    数据抓取模块 package crowling1; import java.sql.CallableStatement; import java.sql.Connection; import java ...

  3. 在虚拟机中的Ubuntu搭建java开发环境

    前提: 安装好虚拟机 在虚拟机中装好了Ubuntu系统 以上两步请参见我的博客(python进阶) 1 安装JDK 1.1 到官网下载jdk压缩包并保存在本地 jdk1.8:点击前往 1.2 在Ubu ...

  4. hadoop主节点(NameNode)备份策略以、恢复方法、操作步骤

    一.dits和fsimage      首先要提到两个文件edits和fsimage,下面来说说他们是做什么的. 集群中的名称节点(NameNode)会把文件系统的变化以追加保存到日志文件edits中 ...

  5. 8、scala函数式编程

    一.函数式编程1 1.介绍 Scala中的函数是Java中完全没有的概念.因为Java是完全面向对象的编程语言,没有任何面向过程编程语言的特性,因此Java中的一等公民是类和对象, 而且只有方法的概念 ...

  6. nginx manager

    ====================================================@echo offrem 当前bat的作用 echo ==================beg ...

  7. kinect2跑高博的orbslam2的过程(仅供自己参考记录)

    首先感谢高博的无私奉献!http://www.cnblogs.com/gaoxiang12/p/5161223.html 程序所在的目录为:/home/zty/catkin_ws/src/iai_ki ...

  8. redis系列:RDB持久化与AOF持久化

    前言 什么是持久化? 持久化(Persistence),即把数据(如内存中的对象)保存到可永久保存的存储设备中(如磁盘).持久化的主要应用是将内存中的对象存储在数据库中,或者存储在磁盘文件中.XML数 ...

  9. Vue 学习文档

    Vue 学习文档 vue 起步 引包 启动 new Vue(options) options: el 目的地(可以用类名.标签名等,也可以直接用mod元素) #elementId .elementCl ...

  10. Swoole 整合成一个小框架

    目录 概述 效果 代码 小结 概述 这是关于 Swoole 学习的第六篇文章:Swoole 整合成一个小框架. 第五篇:Swoole 多协议 多端口 的应用 第四篇:Swoole HTTP 的应用 第 ...