如何通過 AJAX 從 PHP 獲取特定值到 Java Script 並將 div 始終保持在底部？

Question

我之前也問過這個問題，但解決方案不起作用。 我有一個消息網站。 我使用每 1 秒運行一次的 Java Script 通過 AJAX 獲取消息。 問題是它從頭到尾獲取所有值。 於是想到了通過AJAX傳遞最后一條消息ID。 但是我不知道如何在 Java Script 中使用該值，以便我可以使用它來獲取比它更多的消息。

另外我希望 div 處於它的底部位置，直到用戶滾動它。 每當獲取新消息時，div 應自動到達底部。

這是我的 CSS、HTML、Java Script 和 AJAX 代碼：

<style>
.readarea{
  padding: 10px;
  margin-top: 10px;
  background-color: #FFFFFF;
  height: 450px;
  overflow-x: hidden;
}
</style>

<body>

<div class="readarea" id="readarea">

<!--Messages is to be displayed here.-->

</div>

<div class="inputarea">
<textarea placeholder="Type your message" style="width: 800px; overflow: hidden" id="msg"></textarea>
<input type="submit" value="Send" style="padding: 10px 25px" id="sendmsg">
</div>
</body>

<script>

function fetchdata(){
var lm =                                        //last message ID
var cuser =                                     //user ID of the 1st person
var ouser =                                     //user ID of the 2nd person
 $.ajax({
  url: "readmessagesprocess.php",
  type: "POST",
  data : {cuser:cuser, ouser:ouser, lm:lm},
  success: function(read){
    $("#readarea").html(read);
  }
 });
}

$(document).ready(function(){
 setInterval(fetchdata,1000);
});


</script>

這是我用於獲取消息的 PHP 代碼：

<?php

$cuser = mysqli_real_escape_string($conn,$_POST['cuser']);
$ouser = mysqli_real_escape_string($conn,$_POST['ouser']);
$lastmessage = mysqli_real_escape_string($conn,$_POST['lm']);

$sql = "SELECT id, fromid,message,toid FROM messages WHERE ((fromid={$cuser} AND toid={$ouser}) OR (fromid={$ouser} AND toid={$cuser})) AND id>{$lastmessage}";
$result = mysqli_query($conn, $sql) or ("Query Failed");

while($row=mysqli_fetch_assoc($result)){
  if($row["fromid"]==$cuser){
    echo "<div class='cuser'>".$row["message"]."</div>";
  }else{
    echo "<div class='ouser'>".$row["message"]."</div>";
  }
  $lm = $row["id"];                                                       //last message id
}
?>

在這里，我希望 $lm("lm") 在 Java Script 中用作最后一條消息 ID (var lm)，其余代碼在 . 此外，我希望當頁面加載或獲取新消息時，這個 div 位於底部。

Answer 1

我已經把你的代碼變成了一個有效的聊天片段。 我正在使用一種稍微古怪的方法來模仿外部 PHP 服務器，這將處理數據庫中的實際聊天數據。 我意識到我的腳本的某些部分看起來很簡潔甚至神秘。 所以，這里有一些基本的解釋：

代碼以 IIFE 開頭，一個“立即調用的函數表達式”。 該表達式提供了設置“聊天數據庫”的范圍，即其中包含第一條消息的對象msg 。 這個msg對象對於函數setmsg()和getmsg()是可見的，我也通過w[setm]=...在相同的范圍內定義了它們（ w和setm是setm的參數並且設置為window和'setmsg'時IIFE 被調用) 和w[getm]=... 。

函數qs()只是調用document.querySelector()的簡寫符號，我覺得它對 hanlde 來說有點笨拙。 可選參數el可以在元素上下文中進行搜索。 如果沒有它，搜索將從文檔級別開始。

哦，是的， blb()函數是我在這里blb()一個小技巧。 Stackoverflow 不提供執行 CORS Ajax 調用的方法，該方法是一種至少允許GET調用的變通方法（您不能POST到URL.createObjectURL()對象）。 函數getmsg()和setmsg()使用此blb()實用程序來模擬外部服務器。 它們返回一個對象，該對象可用於代替通常在 jQuery Ajax 調用中提供的服務器 URL。

 // for AJAX testing: set up a setter, a getter and a utility "querySelector" function qs: ((w,setm,getm,qs)=>{ const blb=da=>URL.createObjectURL(new Blob([JSON.stringify(da)],{type: "text/json"})); const msg=[{cuser:'abc', ouser:'def', txt:'the first message'}]; w[setm]=da=>(msg.push(da), blb({lm:msg.length})); // setter ajax function w[getm]=lm=>blb(msg[lm]); // getter ajax function w[qs]=(s,el)=>(el||document).querySelector(s); // query Selector with context })(window,'setmsg','getmsg','qs'); function fetchdata(){ let lm = +(qs("li:last-child")||{dataset:{id:-1}}).dataset.id + 1; $.ajax({ url: getmsg(lm), // "readmessagesprocess.php", type: "GET", // "POST", data : ... success: dat=>dat.cuser && // action ONLY if dat.cuser exists! $("#readarea").append(`<li data-id="${lm}">${lm}: ${dat.cuser} says: ${dat.txt}</li>`) }); } var intFD; // setInterval handle const scanStart=()=>(intFD=setInterval(fetchdata,1000)); $(document).ready(function(){ scanStart(); qs('#resume').onclick=scanStart; qs('#stop') .onclick=()=>clearInterval(intFD); qs('#send') .onclick=()=>{ $.getJSON(setmsg({cuser:'cars10m',txt:qs('#msg').value}), function(da){console.log('server response: message count='+da.lm)} ); qs('#msg').value=""; } })

 .readarea{ padding: 10px; margin-top: 10px; background-color: #FFFFFF; height: 150px; overflow-x: hidden; } button, [type=submit] {padding: 10px 25px}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="readarea" id="readarea"></ul> <div class="inputarea"><p>... and this is the input area.</p> <textarea placeholder="Type your message" style="width: 800px; overflow: hidden" id="msg"></textarea><br> <input type="submit" id="send" value="send"/>&nbsp;&nbsp; <button id="stop">stop</button> <button id="resume">resume</button> </div>

關於聊天系統如何工作的幾句話：一旦頁面加載了scanStart() ，常規消息掃描就會開始。 此函數依次調用fetchdata() ，它將嘗試查找瀏覽器上已顯示的最新帖子的id 。 為此，我使用了 CSS 選擇器"li:last-child" 。 與原始版本不同，我在這里為每篇文章使用<li>元素。 上面的選擇器將發布最后一個。 然后我獲取它的 id 並將其放入lm （ lm總是在msg找到的最后一條消息的消息索引加 1 ）並使用lm啟動對getmsg()的$.ajax()調用。

[stop]和[resume]按鈕可用於停止和恢復郵件掃描。

Answer 2

這不應該通過 AJAX 完成，而應該通過sockets 完成。 讓您最喜歡的網絡搜索為您提供“ nodejs chat ”的結果

如何通過 AJAX 從 PHP 獲取特定值到 Java Script 並將 div 始終保持在底部？

問題描述

2 個解決方案

解決方案1
0 2020-09-11 07:58:34

解決方案2
0 2020-09-11 08:41:11

如何通過 AJAX 從 PHP 獲取特定值到 Java Script 並將 div 始終保持在底部？

問題描述

2 個解決方案

解決方案1 0 2020-09-11 07:58:34

解決方案2 0 2020-09-11 08:41:11

解決方案1
0 2020-09-11 07:58:34

解決方案2
0 2020-09-11 08:41:11