2017-07-02 105 views
0

你好家伙我想与Jquery,php,ajax和mysql建立聊天室 我几天以来面临的问题是,当我得到最后一条消息的值时,到div我想是附加的最后一条消息只有一次,再次追加如果有新的消息,这里是我的Ajax调用追加最后一条消息一次

var chat = ""; 
    $.ajax({ 
      url: "php/gt_user.php", 
      type: "get", 
      success: function (result) { 
       var gtUser = $.parseJSON(result); 
       $.each(gtUser, function (idx, obj) { 
        var usrApp = "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i>"; 
        usrApp += "<p class='usr-name'>" + obj.Tables_in_chat + "</p></span>"; 
        $('.userarea').append(usrApp); 
       }); // here i get all the username who sent a message and print them on a div 
       $('.userarea span').on('click', function() { 
        $('.msgarea').html(""); 
        var usrName = $(this).text(); 
        $('#usrname').text(usrName); 
        setInterval(function() { 
         $.ajax({ 
          url: "php/admin_msg.php", 
          type: "post", 
          data: { 
           name: usrName 
          }, 
          success: function (result) { 
           var lastmsg = result; 

           function appedn() { 
            var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>"; 
            usrMsg += "<span><p>" + lastmsg + "</p></span></div>"; 
            $('.msgarea').append(usrMsg); 
           } 

           if (chat !== result) { 
            appedn(); 

           } else { 
            chat = result; 
           } 

          } 

         }); 
        }, 2000); 


       }); 
      } 
     }); 

php/admin_msg.php的respanse的工作,我拿到了最后的消息成功地在问题在于这个脚本不断地向消息区域添加相同的消息,而且我想要的是只添加一次消息,如果有新的消息

+0

你可以发布来自php/admin_msg.php的回应吗?我会在响应中包含时间戳/消息ID,并且只接收新消息,在第一个请求上发送0,以及在下面的最新检索消息ID。 – Benjaco

回答

0

我终于能够修复后第1天的斗争,从而将在此公布answear以防万一的问题,它会帮助另外一个人面临着同样的问题

的一部分,我必须让所有的用户名从数据库表中我将其移动到我的HTML和使用PHP的几行来呼应这样的结果(每个用户名都有自己的表)

// show all the user name that sent a message 
    $result = $con->query("show tables from chat"); 
    while($row = mysqli_fetch_assoc($result)){ 
     echo "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i><p class='usr-name'>".$row['Tables_in_chat']."</p></span>"; 
    } 

然后在我的jQuery脚本我感动的是检查功能在点击事件之外每隔2秒发送一次最后一条消息,这样我的jquery脚本现在看起来更清晰了

/* get the user name and added it to the header of the message box */ 
    $('.userarea span').on('click', function() { 
      $('.msgarea').html(""); 
      var usrName = $(this).text(); 
      $('#usrname').text(usrName); 

     }); 
     var chatdata = ""; 
    /* check for new message and append the message area if there is a new one */ 
     setInterval(function() { 
      var usrName = $('#usrname').text(); 
      $.ajax({ 
       url: "php/admin_msg.php", 
       type: "post", 
       data: { 
        name: usrName 
       }, 
       success: function (result) { 
        function appedn() { 
         var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>"; 
         usrMsg += "<span><p>" + result + "</p></span></div>"; 
         $('.msgarea').append(usrMsg); 
        } 

        if (chatdata !== result) { 
         appedn(); 
         chatdata = result; 
        } 
       } 
      }); 
     }, 2000); 
0

你需要以某种方式识别已经附加到你的html最后的消息最好会从服务器发送一些ID。所以你的消息div应该包含一些data-id属性,然后当你要求下一条消息时获取$('.msgarea')元素的最后一个子元素,请阅读data-id并与当前元素进行比较。

另一件我建议移动到一些视图库或框架,反应,角,vue或任何。当你想用纯jQuery来管理这些功能时,它会变得复杂。

+0

是的我是所有最重要的,我认为我应该放弃这个项目,只是因为这个脚本的行为,我教我错过了一些东西,这就是为什么我在这里发布的问题 –

相关问题