使用jQuery和AJAX提交回复后更新收件箱

时间:2016-06-23 01:25:51

标签: javascript php jquery html ajax

所以问题是在用户发送回复后更新收件箱,就像在Facebook上一样。

我的消息传递结构如下所示:



<div class="message_container">
  <div class="message_inbox">
    <div class="inbox">
      <?php include("./includes/messages/inbox.php"); ?>
    </div>
  </div>
  <div class="message_conversation">
    <div class="conversation">
      <ul>
        <li>
          <div>
            <span>Profile name</span>
            <span>conversation</span>
          </div>
        </li>
        <li>
          <div>
            <span>Profile name</span>
            <span>conversation2</span>
          </div>
        </li>
        <li>
          <div>
            <span>Profile name</span>
            <span>conversation3</span>
          </div>
        </li>
      </ul>
    </div>
    <textarea id="reply"></textarea>
  </div>
</div>
&#13;
&#13;
&#13;

我将收件箱分成单独的文件,并使用include();功能显示该文件。这是inbox.php文件的基本内容:

&#13;
&#13;
<ul>
  <li>
    <div>
      <span>Profile name</span>
      <span>message</span>
    </div>
  </li>
  <li>
    <div>
      <span>Profile name2</span>
      <span>message</span>
    </div>
  </li>
  <li>
    <div>
      <span>Profile name3</span>
      <span>message</span>
    </div>
  </li>
</ul>
&#13;
&#13;
&#13;

因此,在用户发送回复后,我设法通过附加数据来更新页面,所以没有问题。我唯一想知道的是如何在用户发送回复后更新或刷新收件箱(不刷新页面)。

编辑:这是我提交回复的ajax代码:

&#13;
&#13;
$(function() {
  $("#reply").keypress(function(e) {
    if (e.which == 13 && !e.shiftKey) {
      var reply = $(this).val();
      var toid = <?php echo json_encode($_GET['id']); ?>;
      
      $.ajax({
        method: "GET", 
        url: "./ajax/reply_conversation.php", 
        data: {reply: reply, toid: toid}, 
        cache: false, 
        success: function(html) {
          $(".conversation ul").append(html);
          $("#reply").val('');
        }
      })
    }
  })
})
&#13;
&#13;
&#13;

reply_conversation.php文件返回<li></li>inbox.php上包含用户名和最新消息的结构相同。

修改:这里是reply_conversation.php内的内容:

<?php
require_once("conn.php");
// classes are initialized inside conn.php

if (!isset($_SESSION)) {
  session_start();
}

$id = $_SESSION['id'];
$toid = $_GET['toid'];
$reply = $_GET['reply'];

// replyConversation returns a bool value, it returns true if the query runs successfully
if ($msg->replyConversation($id, $toid, reply)) {
  ?>
  <li>
    <span>Profile username</span>
    <span>Message</span>
  <li>
  <?php
}
else {
  ?>
  <li>
    <span>Something went wrong.</span>
  </li>
  <?php
}
?>

SQL查询被分成不同的类文件,其中包含用于数据库交互的函数。它会在conn.php中实例化,然后我会使用require

2 个答案:

答案 0 :(得分:1)

当你写下tittle时,你应该使用ajax。

$.ajax({
            url: "data.php",//file wich has query updating the inbox
            data: {id:theid},//describe your data here
            dataType: 'json',// type of data that will you get (JSON/HTML).
            type: 'POST',//sending type (POST/GET)
            success: function(data) {
               //do what you want to be
            }
        });

希望它能帮到你:)。

答案 1 :(得分:0)

在PHP中执行长轮询技巧。 Examples在这里。这很容易。以下是一个例子:

function checkInbox() {
    $.post({
        data: {
            uid: "user id"
        },
        success: function(response) {
            alert("New reply...");
            // restart
            checkInbox();
        },
        url: "ajax/check_inbox.php"
    });
}

// Call at the function least once
checkInbox();