如何通过 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