如何在Ajax表单提交后显示while循环

时间:2017-05-13 02:31:42

标签: javascript php jquery ajax

在谈到Ajax时,我还处于学习转变之中。我创建了一个将数据发送到数据库的脚本,它可以运行。数据插入。现在我的问题是如何在页面上显示数据?

Display.php的

       <div class='displayMessage' style='height: 540px; padding:5%; overflow-x:hidden;'>
       <?php
       $chatmsgQ="SELECT * FROM ve_chat c 
       WHERE c.isActive='1' AND c.fromUserId='$loginid_session' 
       OR c.toUserId='$loginid_session'";
       $chatmsgresult=  mysqli_query($db,$chatmsgQ);
       while($chatmsg=  mysqli_fetch_array($chatmsgresult)){?>
      <?php if($chatmsg['fromUserId']==$loginid_session):?>
      <!-- user one -->
      <p class='bubble pull-left'><?=$chatmsg['message'];?></p>
      <?php elseif($chatmsg['fromUserId']!=$loginid_session):?>
      <!-- user two-->
      <p class='bubbleother pull-right'><?=$chatmsg['message'];?></p>
      <?php endif;?>
      <?php } ;?>
      </div>

 <!-- write message-->
<form id="chatForm" method='post' action='chat.php'>
<textarea id='chatMessage' name='chatMessage' placeholder="Type your message here... " value=''></textarea> 
<button id='buttons' type="submit" name='sendChat' class="btn btn-default">Send</button>
<input type='hidden' id='fromUserId' name='fromUserId' value='<?=$loginid_session;?>'>
<input type='hidden' id='toUserId' name='toUserId' value='<?=$touserid;?>'>
</form>

js脚本

<script>
$(document).ready(function(){
    $("#buttons").click(function(){
        var fromuserid = $("#fromUserId").val();
        var touserid = $("#toUserId").val();
        var chatMessage = $("#chatMessage").val();
        // Returns successful data submission message when the entered information is stored in database.
        var dataString = 'fromUserId='+ fromuserid + '&toUserId='+ touserid + '&chatMessage='+ chatMessage;
        // AJAX Code To Submit Form.
        $.ajax({
            type: "POST",
            url: "chat.php",
            data: dataString,
            cache: false,
            success: function(result){
                //what do I put here exactly?
            }
        });

        return false;
    });
});
</script>

chat.php

  //get variables
        $chatMessage= $_POST['chatMessage'];
        $fromUserId= $_POST['fromUserId'];
        $toUserId= $_POST['toUserId'];
        $chatStatus='1';

    //insert in ve_articles_comments
    $startChatQ = $db->prepare("INSERT INTO ve_chat (fromUserId,toUserId,message,isActive) VALUES (?,?,?,?)");
    $startChatQ ->bind_param("iisi",$fromUserId,$toUserId,$chatMessage,$chatStatus);
    $startChatQ ->execute() or die(mysqli_error($db)); 

    if($startChatQ ){
     // echo "Data Submitted succesfully";
        $_SESSION['success']='<h4 style="text-align: center;" class="alert alert-success alert-dismissable" ><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>Your chat request was sent with success.</h4>'; 
      header('Location: ' . $_SERVER['HTTP_REFERER']);
    exit;
      }
    $startChatQ ->close();
    $db->close();

1 个答案:

答案 0 :(得分:0)

好的,这对我有用:

<强> Display.php的

       <div class='displayMessage' style='height: 540px; padding:5%; overflow-x:hidden;'>
       <?php
       $chatmsgQ="SELECT * FROM ve_chat c 
       WHERE c.isActive='1' AND c.fromUserId='$loginid_session' 
       OR c.toUserId='$loginid_session'";
       $chatmsgresult=  mysqli_query($db,$chatmsgQ);
       while($chatmsg=  mysqli_fetch_array($chatmsgresult)){?>
      <?php if($chatmsg['fromUserId']==$loginid_session):?>
      <!-- user one -->
      <p class='bubble pull-left'><?=$chatmsg['message'];?></p>
      <?php elseif($chatmsg['fromUserId']!=$loginid_session):?>
      <!-- user two-->
      <p class='bubbleother pull-right'><?=$chatmsg['message'];?></p>
      <?php endif;?>
      <?php } ;?>
      </div>

 <!-- write message-->
<form id="chatForm" method='post' action='chat.php'>
<textarea id='chatMessage' name='chatMessage' placeholder="Type your message here... " value=''></textarea> 
<button id='buttons' type="submit" name='sendChat' class="btn btn-default">Send</button>
<input type='hidden' id='fromUserId' name='fromUserId' value='<?=$loginid_session;?>'>
<input type='hidden' id='toUserId' name='toUserId' value='<?=$touserid;?>'>
</form>

<强>的jQuery

$(document).ready(function(){
$("#buttons").click(function(){
var fromuserid = $("#fromUserId").val();
var touserid = $("#toUserId").val();
var chatMessage = $("#chatMessage").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'fromUserId='+ fromuserid + '&toUserId='+ touserid + '&chatMessage='+ chatMessage;
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "chat.php",
data: dataString,
cache: false,
success: function(response){
   $("#displayMessage").html(response);
}
});

return false;
});
});

<强> chat.php

//get variables
    $chatMessage= $_POST['chatMessage'];
    $fromUserId= $_POST['fromUserId'];
    $toUserId= $_POST['toUserId'];
    $chatStatus='1';
      $loginid_session=$_POST['fromUserId'];

//insert in ve_articles_comments
$startChatQ = $db->prepare("INSERT INTO ve_chat (fromUserId,toUserId,message,isActive) VALUES (?,?,?,?)");
$startChatQ ->bind_param("iisi",$fromUserId,$toUserId,$chatMessage,$chatStatus);
$startChatQ ->execute() or die(mysqli_error($db)); 

if($startChatQ ){
 // echo "Data Submitted succesfully";
                    $chatmsgQ="SELECT * FROM ve_chat c WHERE c.isActive='1' AND (c.fromUserId='$loginid_session' OR c.toUserId='$loginid_session')";
                    $chatmsgresult=  mysqli_query($db,$chatmsgQ);
                    while($chatmsg=  mysqli_fetch_array($chatmsgresult)){
                        if($chatmsg['fromUserId']==$loginid_session){
                            echo "   <p class='bubble pull-left'>" .$chatmsg['message'] . "</p> ";

                        }
                        elseif($chatmsg['fromUserId']!=$loginid_session){
                            echo  "  <p class='bubbleother pull-right'>" . $chatmsg['message'] . "</p> ";

                        } }
                        }
                        $startChatQ ->close();
                        $db->close();