javascript - 如何在不刷新页面的情况下获取laravel数据？

Question

目前正在开发 Laravel 的实时聊天模块。我能够通过ajax将用户聊天数据发送到数据库，但是，无法在不刷新的情况下显示数据库中的数据。

这里是显示来自数据库的消息的地方-

        <ul class="convo-list convo-body">
      <li>
        <div class="row convo-row-msg">
          <div class="col-xs-2 convo-row-msg-avatar">
              <a href="{{ url('/') }}/images/users/photos/profiles/{{ $users->profilephoto }}">  
                <img src="{{url('/') }}/images/users/photos/profiles/{{ $users->profilephoto }}" alt="" width="220px" style="border: 4px solid #fff;border-radius:2px;">
              </a>
          </div>  
          <div class="col-xs-10 convo-row-body">
            <b><a href="#"> Username place here </a> </b>
            <span class="timestamp">
              Timestamp
            </span>
            <p class="convo-content"> User chat message will be there </p>
          </div>
        </div>          
      </li>
    </ul>

这是我需要从数据库中获取的ajax-

var takeHash = $('#hash').val();
var interval = setInterval(function(){

$.ajax({  
    type: 'GET',  
    url: takeHash, 
    success: function(response) {

        $('.convo-body').append(response);

    }
});

}, 1000);

最后我的 Controller 像这样响应 -

    public function showSingleMessage($hash)
{
    $msg = Message::where('conversationhash', $hash)
                    ->where('fromid', '!=', Auth::user()->id)
                    ->get();
    $fromid = '';
    foreach ($msg as $value) {            
        $fromid = $value->fromid;
    }

    $messages = Message::where('conversationhash', $hash)
        ->Where('fromid', Auth::user()->id)
        ->orWhere('fromid', $fromid)
        ->get();

    $user = new User();
    return view('messages.show-single')
        ->with(['messages' => $messages, 'user' => $user, 'touser' => $fromid]);
}

那么，有人可以帮助我如何在 Blade 模板中显示我的数据(laravel 使用它)吗？

var takeHash = $('#hash').val();
var interval = setInterval(function(){

$.ajax({  
    type: 'GET',  
    url: takeHash, 
    success: function(response) {

        $('.convo-body').append(response);

    }
});

}, 1000);

<ul class="convo-list convo-body">
      <li>
        <div class="row convo-row-msg">
          <div class="col-xs-2 convo-row-msg-avatar">
              <a href="{{ url('/') }}/images/users/photos/profiles/{{ $users->profilephoto }}">  
                <img src="{{url('/') }}/images/users/photos/profiles/{{ $users->profilephoto }}" alt="" width="220px" style="border: 4px solid #fff;border-radius:2px;">
              </a>
          </div>  
          <div class="col-xs-10 convo-row-body">
            <b><a href="#"> Username place here </a> </b>
            <span class="timestamp">
              Timestamp
            </span>
            <p class="convo-content"> User chat message will be there </p>
          </div>
        </div>          
      </li>
    </ul>

Answer 1

我不同意您的输出数据，因此我只是更新了用户屏幕中的附加格式。

$.ajax({  
type: 'GET',  
url: takeHash, 
success: function(response) {
 appenddata='<li>';
    if (typeof(response)=='array') {
     appenddata+=response['message'];
   }
  if ( typeof(response)=='object') {
     appenddata+=response->message;
   }
   if ( typeof(response)=='string') {
     appenddata+=response;
   }
     appenddata+='</li>';
    $('.convo-body').append(appenddata);

}
});

}, 1000);