带有回复功能的聊天室

我不确定这是否已被解决（我确定它可能已被解决），但是我有问题搞清楚了，似乎无法找到我正在寻找的内容。以下是我对我的客舱：带有回复功能的聊天室

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
<style> 
body { 
font:16px Helvetica; 
color: #a8199f; 
text-align:center; 
padding:35px; } 

form, p, span { 
    margin:0; 
    padding:0; } 

input { 
    font:16px Helvetica; } 

a { 
    color:#0000FF; 
    text-decoration:none; } 

a:hover { 
    text-decoration:underline; } 

#wrapper { 
    margin:0 auto; 
    padding-bottom:25px; 
    background: #bdbbb7; 
    width:50%; 
    border:1px solid #ACD8F0; } 

#chatbox { 
    text-align:left; 
    margin:0 auto; 
    margin-bottom:25px; 
    padding:10px; 
    background:#fff; 
    width:50%; 
    border:1px solid #ACD8F0; 
    overflow:auto; } 

#chatbox p { 
    padding:1em; 
    margin:1em; 
    background:#afd6ed; 
    border:1px solid #BDBDBD; 
    -moz-border-radius:4px; 
} 

#usermsg { 
    width:50%; 
    border:1px solid #ACD8F0; } 

#submit { 
    width: 60px; } 


.welcome { 
    float:left; } 

.logout { 
    float:right; } 

.msgln { 
    margin:0 0 2px 0; } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="menu"> 
     <p class="welcome">Welcome</p> 
     <p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p> 
     <div style="clear:both"></div> 
    </div> 

    <div id="chatbox"> 
     <p>Here's our chat data</p> 
     <div id="update"></div> 
    </div> 

    <form name="message"> 
     <input name="usermsg" type="text" id="usermsg" size="63" /> 
     <button type="button" id="submitmsg" value="send">Send</button>  
    </form> 
</div> 

<script> 

    $(document).ready(function(){ 
     $('#submitmsg').click(function(){ 
      var message = $('#usermsg').val(); 
      $('#chatbox').append('<p>' + message + '</p>'); 
      $('#usermsg').val(''); 
     }); 
    }); 

function close_window(url){ 
     var newWindow = window.open('', '_self', ''); //open the current window 
     window.close(url); 
    }; 
</script> 
<script src="script.js"></script> 
</body> 
</html>

我想使这个以.json文件：

[ 
    { 
    "response":"Hello", 
    }, 
    { 
    "response":"How may I help you?", 
    }, 
    { 
    "response":"Let me look into that for you.", 
    }, 
    { 
    "response":"Can you give me more information about that?", 
    }, 
    { 
    "response":"Is there anything else I can help you with?", 
    }, 
    { 
    "response":"Thank you, Have a good day.", 
    } 
]

是用户消息的响应。我已经试过这个脚本，但我知道我缺少东西，只是似乎无法自己掌握它或找到适当的信息。任何帮助或引用将不胜感激。谢谢。

$('#usermsg').keyup(function(){ 
     var userResponse = $('#usermsg').val(); 
     $.getJSON('data.json', function(data){ 
      var output = '<div class="repsonse">'; 
      $.each(data, function(key, val){ 
       if(val.response != -1){ 
        output += '<p>' + val.response + '</p>'; 
     }); 
     output += '</div>'; 
     $('#update').html(output); 
    }); 
});

来源

2017-01-09 Brandy Kimmel

的[？我如何返回从一个异步调用的响应（可能的复制http://stackoverflow.com/questions/14220321/我怎么做 - 我从异步调用返回响应） –

我想这是我不明白。我不明白如何使用chatbox和用户响应来做出类似的工作，以从.json文件返回其中一个响应。 –

AJAX请求getJSON是异步和非阻塞的。 function(data)方法是回调函数，只有在.getJSON()请求成功完成时才会运行。而您的示例中的$('#update').html(output)立即运行 - 它不会等待ajax请求完成。

你需要的DOM操作进入回调：

$.getJSON('data.json', function(data) { 
    var output = '<div class="repsonse">'; 
    $.each(data, function(key, val) { 
     if (val.response != -1) { 
     output += '<p>' + val.response + '</p>'; 
     } 
    });//end each 
    output += '</div>'; 
    $('#update').html(output); 
});

来源

2017-01-09 17:39:05 Moob

好的，我现在看到了，但我怎么让他们作为对用户消息的回应呢？ –

带有回复功能的聊天室

回答

相关问题