如何在不刷新页面的情况下从数据库中的textarea添加数据[重复]

Question

我正在使用 PHP、HTML、MySql 等开发登录和注册系统，所以，我的聊天有问题！

我想从 textarea 中获取数据，如果单击了按钮，则清空 textarea，然后将文本发送到数据库而不刷新页面！我有一个系统可以刷新数据库中的数据并刷新 index.php 中的 div“聊天”！

帮帮我！

Answer 1

您可以使用以下代码：

以下使用AJAX和PHP， 首先给按钮做一个函数，当按下发送按钮时，会执行AJAX函数：

function msgsend() 
{
 var msg = $("#message").val();
 if (msg!='')
  {
   $('#message').val("");
   $.post("msgsubmit.php", { msg: msg },  
   function(result)
   {  
    msgrecv();
   }); 
  }
}

然后检查是否收到新消息并填充 Messages 字段：

function msgrecv(){
 $.post("msgchk.php",  {temp0 : 1},
 function(result){  
 var div = document.getElementById('convo');
 div.innerHTML = div.innerHTML + result;
 if (result)
  {
   var elem = document.getElementById('convo');
   elem.scrollTop = elem.scrollHeight;
  }
 }); 
}

所以，逻辑。每个用户都有一个lastid，它告诉消息用户最后一次看到的id，然后当用户向数据库添加新消息时，调用AJAX函数并将消息提交到数据库并@调用 987654324@ 函数来获取对话框中的消息详情，注意这里的消息框是空的，另外一端每隔 10 秒自动调用函数msgrecv()要检查是否有新消息，在 PHP 代码中，我有一个使用 $lastid 创建的会话变量，它存储最后一条消息的 id，然后检查数据库中的消息 id > $lastid，如果有的话，就回显/打印出来，将作为AJAX函数的结果...

附： - 我在我的一个项目中使用了这段代码，由于我不知道你的代码，所以你可能需要根据你的代码修改它...

elem.scrollTop = elem.scrollHeight; 只是滚动到 convo 框的底部（这是新消息，因为新消息出现在 convo 框的底部），所以每当有新消息到达时，用户不会必须向下滚动才能看到...

更新数据库时出错：

嗯，那你可以看看我的PHP代码供参考：（这是用于消息提交）

$msgcount = $row['messages'];
$msgcount = $msgcount + 1;
$chk=1;
$sql = "INSERT INTO ".$jobid."_conversation (date, from_id, from_username, to_writer, message, writer_read) 
        VALUES (now(), $userid, '$username', 0, '$message', 0)";
if (mysqli_query($con, $sql)) 
{
 $sql1 = "UPDATE jobs SET messages='$msgcount' WHERE id=$jobid";
 if(mysqli_query($con, $sql1))
  {
   echo 1;
  }
 else
  {
   echo 0;
  }
 }
 else
 {
  echo 0;
 }

这里，回显 1 表示成功，0 表示添加数据库失败...

现在进行消息检查：

$lastid = $row1['id'];
if ( $lastid > $id)
{
 $to_writer = $row1['to_writer'];
 $message = $row1['message'];
 $rtrn = $rtrn."<div class=\"row\">";
 if ($to_writer == 1)
 {    
  $rtrn = $rtrn."<div class=\"well well-sm col-sm-offset-1 col-sm-8\">".nl2br($message)."</div>";
 }
 else
 {
  $rtrn=$rtrn."<div class=\"well well-sm col-sm-offset-3 col-sm-8\">".nl2br($message)."</div>";
 }
  $rtrn=$rtrn."</div>";
}

这里，$towriter 是接收消息的人的用户名，这将检查消息应该在对话框的右侧还是在对话框的左侧，（区分发送和接收的消息）...还有一些 HTML 是因为我使用 Bootstrap 来显示井中的每条消息...

希望这会有所帮助... :)

Answer 2

你需要做一个 ajax 事件来获取你的 textarea 的内容并将其发送到数据库，我推荐一个简单的框架，比如 JQuery：http://api.jquery.com/jquery.ajax/

Answer 3

我有这个代码：

<?php
session_start();

require_once("conf/mysql.php");
$nome = $_SESSION["nome"];
$mensagem = $_POST["msg"];

mysqli_query($con, "INSERT INTO chat (user, message) VALUES ('$nome','$mensagem')");
?>

而索引是：

    <!-- Chat -->
<div class="container">

<div class="row">

<div class="col-md-8 col-md-offset-2">
<div class="panel container-fluid">
<center><h4><b> Chat: </b></h4></center>

<div class="well" >
<div class="loader"></div>

<script>
    $(document).ready(function () {
        $('#msg').change(function () {
            if ($.trim($('#msg').val()).length < 1) {

                $('#enviar').addClass('disabled');

            } else {

                $('#enviar').removeClass('disabled');
                //No guarantee it isn't mindless gibberish, sorry.

            }
        });
    });
</script>

<script type="text/javascript" language="javascript">
function msgsend() 
{
 var msg = $("#msg").val();
 if (msg!='')
  {
   $('#msg').val("");
   $.post("enviar.php", { msg: msg },  
  }
}
</script>

<div id="chat">
<div id="status" style="display: none;"></div>
</div>
</div>

<center>
<form id="ajax" role="form" method="post">

<div class="form-group">

<textarea id="msg" type="text" name="chat" class="form-control" placeholder="Digite aqui..."></textarea>


</div>
</form>
<button id="enviar" name="submit" class="btn btn-success disabled"> Enviar </button>

</center>

</div>

</div>
</div>

</div>