• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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); 
      } 
     
    }); 
    
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • 纯JS实现AJAX局部刷新功能
    • AJAX如何实现无刷新登录功能
    • ajax的分页查询示例(不刷新页面)
    • Ajax解决多余刷新的两种方法(总结)
    上一篇:使用ajax实现分页技术
    下一篇:细数Ajax请求中的async:false和async:true的差异
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    ajax无刷新评论功能 ajax,无,刷新,评论,功能,