添加用户名而无需硬编码,聊天室应用程序

时间:2014-09-18 23:03:24

标签: javascript jquery ajax

首先,我公开是一个新手(对于这个网站和编码)所以我提前道歉,如果这个问题的答案过于简单,但我迫切需要一些帮助。

我开发了“chatbuilder”作为我对开发训练营的采访过程的一部分。不幸的是,我在chatSend函数中硬编码了我的用户名,其中包括一个ajax调用。我想使用用户名的提示输入,因为假设这个聊天应该能够拥有许多用户,而不仅仅是我和机器人聊天。我花了太多时间试图找出正确的方法来做到这一点,几个小时的试验和错误,而我意识到修复可能需要大约45秒。我发布了我的完整代码,如果有人可以告诉我如何正确实现它将非常感谢。谢谢!

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <script src="http://chatbuilder.hackreactor.com/ChatBuilder.js"> </script>
  </head>
    <body>
     <script>

     Chat.guide.start();



      delete Chat.display;
      delete Chat.fetch;
      delete Chat.send;


      function chatDisplay(str){
      $(".messages").append( "<li>" + str  + "</li>");
      };

      function chatFetch(fun){
        var obj = {};
        var result = [];
        $.ajax({
          type : "GET",
          url : "https://api.parse.com/1/classes/chats?order=-createdAt",
          dataType: "json",
          contentType : "application/json; charset=utf-8",
          async : false,
          complete : function(data)
           {
              obj = JSON.parse(data.responseText);
           }
        });

        for (var i = 0; i < obj.results.length; i++) {
          result.push(obj.results[i]);
        };
        result.sort(function(a,b){
          a = new Date(a.createdAt);
          b = new Date(b.createdAt);
          return a<b ? -1 : a>b ? 1 : 0;
        });
        for (var i = 0; i < result.length; i++){
          result[i] = result[i].text;
        }
        fun(result);
      };


      function chatSend(str){
      var user = document.URL.slice(document.URL.lastIndexOf('=') + 1);
      var userpost =  $.ajax({
          type : "POST",
          url : "https://api.parse.com/1/classes/chats",
          data: JSON.stringify({text: 'Daniel: ' + str,}),
          dataType: "json",
          contentType : "application/json; charset=utf-8",
          async : false,
        });
        return userpost;
      };


      function chatRefresh(){
        $(".messages").empty();
        function chatTether(arr){
          for(var i = 0; i < arr.length; i++){
            chatDisplay(arr[i]);
          }
        };
        chatFetch(chatTether);
      };
      setInterval(chatRefresh,3000);


      $(document).ready(function(){
        $(".send").on("click", function(){
          chatSend($(".draft").val())
          $(".draft").val('');
        });
      });

    </script>

  <div class="container">
    <h2>Fixed Chat</h2>

    <input class="draft" type="text"/> <button class="send">send</button>

    <ul class="messages">
    </ul>
  </div>
  </body>
</html>

1 个答案:

答案 0 :(得分:1)

所以,如果我确实以正确的方式帮助你: 首先你要像这样做什么

var promptName = prompt('Enter your name', 'Some name just in case))');

然后你只需将它添加到你的ajax func:

 function chatSend(str){
  var user = document.URL.slice(document.URL.lastIndexOf('=') + 1);
  var str = promptName + someElseStringYouWant;
  var userpost =  $.ajax({
      type : "POST",
      url : "https://api.parse.com/1/classes/chats",
      data: JSON.stringify({text: str,}),
      dataType: "json",
      contentType : "application/json; charset=utf-8",
      async : false,
    });
    return userpost;
  };

BTW:在全局范围内声明promptName变量,因此您的发送消息功能可以看到它。 UPD:好的,忘记&#39;关于提示的东西,我之前说过,因为它内置在你的lib中,而且我发现它只是缩小版本,所以我不能查找存储它的变量,因此您应该使用url

尝试以前的方法
 function chatSend(str){
  var url = $(location).attr('href');
  var user = url.substr(url.lastIndexOf('=')+1);
  var fullString = user + ': ' + str;
  var userpost =  $.ajax({
      type : "POST",
      url : "https://api.parse.com/1/classes/chats",
      data: JSON.stringify({text: fullString,}),
      dataType: "json",
      contentType : "application/json; charset=utf-8",
      async : false,
    });
    return userpost;
  };

所以,你从你的网址获得了子串,并且已经完成了。

P.S。即使你不能投票,你也可以接受答案;)