Question

为什么此代码无法正常工作

我正在使用php和aiml构建一个聊天机器人应用程序。我已经建立了相同的聊天窗口。但是在我输入消息的聊天窗口中，它每次都会覆盖上一条消息。我希望新消息应该出现在新行中。请帮忙

我的代码是

<div class="panel" id="chat">
<div class="panel-heading" style="background-color:#337ab7">
  <h3 class="panel-title" style="color:#FFF">
    <i class="icon wb-chat-text" aria-hidden="true" ></i> How Can I Help You
  </h3>
</div>
<div class="panel-body">
  <div class="chats">
    <div class="chat">
      <div class="chat-avatar">
        <a class="avatar avatar-online" data-toggle="tooltip" href="#" data-placement="right" title="" data-original-title="June Lane">
          <i></i>
        </a>
      </div>
      <div class="chat-body">
        <div class="chat-content">
          <p>
            <div class="botsay">Hey!</div>
          </p>
          <time class="chat-time" datetime="2015-07-01T11:37">
          <?php
                echo date("h:i:sa");
            ?></time>
        </div>
      </div>
    </div>
    <div class="chat chat-left">
      <div class="chat-avatar">
        <a class="avatar avatar-online" data-toggle="tooltip" href="#" data-placement="left" title="" data-original-title="Edward Fletcher">

          <i></i>
        </a>
      </div>
      <div class="chat-body">
        <div class="chat-content">
          <p><div class="usersay">&nbsp;</div></p>
           <time class="chat-time" datetime="2015-07-01T11:37">
          <?php
                echo date("h:i:sa");
            ?></time>
        </div>
      </div>
    </div>

  </div>
</div>
<div class="panel-footer">

  <form method="post" name="talkform" id="talkform" action="index.php">
    <div class="input-group">
      <input type="text" class="form-control" name="say" >
      <input type="hidden" name="convo_id" id="convo_id" value="<?php echo $convo_id;?>" />
      <input type="hidden" name="bot_id" id="bot_id" value="<?php echo $bot_id;?>" />
      <input type="hidden" name="format" id="format" value="json" />
      <span class="input-group-btn">
        <input class="btn btn-primary" type="submit" name="submit" id="submit"  value="Send" />
      </span>

    </div>
  </form>
</div>

我使用ajax使用aiml在聊天窗口中输入值。

$(document).ready(function() {
  // put all your jQuery goodness in here.
    $('#talkform').submit(function(e) {
      e.preventDefault();
      var user = $('#say').val();
      $('.usersay').text(user);
      var formdata = $("#talkform").serialize();
      $('#say').val('');
      $('#say').focus();
      $.get('<?php echo $url ?>', formdata, function(data){
        var b = data.botsay;
        if (b.indexOf('[img]') >= 0) {
          b = showImg(b);
        }
        if (b.indexOf('[link') >= 0) {
          b = makeLink(b);
        }
        var usersay = data.usersay;
        if (user != usersay) {
          $('.usersay').text(usersay);
        }
        $('.botsay').html(b);
      }, 'json').fail(function(xhr, textStatus, errorThrown){
        $('#urlwarning').html("Something went wrong! Error = " + errorThrown);
      });
      return false;
    });
  });
  function showImg(input) {
    var regEx = /\[img\](.*?)\[\/img\]/;
    var repl = '<br><a href="$1" target="_blank"><img src="$1" alt="$1" width="150" /></a>';
    var out = input.replace(regEx, repl);
    console.log('out = ' + out);
    return out
  }
  function makeLink(input) {
    var regEx = /\[link=(.*?)\](.*?)\[\/link\]/;
    var repl = '<a href="$1" target="_blank">$2</a>';
    var out = input.replace(regEx, repl);
    console.log('out = ' + out);
    return out;
  }

Answer 1

您的代码存在的问题是您只是继续替换usersay和botsay的内容。您需要根据需要添加或添加前缀。

考虑这段代码，您需要根据评论进行更改：

  $.get('<?php echo $url ?>', formdata, function(data){
    var b = data.botsay;
    if (b.indexOf('[img]') >= 0) {
      b = showImg(b);
    }
    if (b.indexOf('[link') >= 0) {
      b = makeLink(b);
    }
    var usersay = data.usersay;
    if (user != usersay) {
      $('.usersay').append(usersay);    // 1. Change here.
    }
    $('.botsay').append(b);             // 2. Change here.
  }, 'json')

聊天应用使用PHP更新以前的消息

1 个答案: