douque9815
douque9815
2017-04-11 00:48
浏览 34

为什么这个PHP AJAX MysQl聊天脚本需要页面刷新?

I wrote a very simple chat script that inserts data with AJAX to avoid page refresh. The data inserts but I need to refresh the page in order to see the data that was inserted. I use jQuery to avoid page refresh. Can someone help?

script

$("#submit").click( function() {
 $.post( $("#chatForm").attr("action"), 
         $("#chatForm :input").serializeArray(), 
         function(info){ $("#result").html(info); 
   });
 clearInput();
});

$("#chatForm").submit( function() {
  return false; 
});

function clearInput() {
    $("#chatForm :input").each( function() {
       $(this).val('');
    });
}

form.php

    <form id="chatForm" action="chat.php" method="post">
    <input id='message' name="message" type="text" class="form form-control messageBar" placeholder="Write message here..."/>
    <input id='employee_id' name='employee_id' type="hidden" value="<?=$session_myemployeeid;?>">
    <div class='col-md-2 pull-right'>
    <button id="submit">Send Comment</button>
    </div>
    </form>

chat.php

<?php
include '../includes/config.php';

// set parameters and execute
$employee_id = $_POST['employee_id'];
$message= $_POST['message'];

// prepare and bind
$insertchat= $db->prepare("INSERT INTO companychatroom (employee_id,message) VALUES (?, ?)");
$insertchat->bind_param("is",$employee_id,$message);
$insertchat->execute() or die(mysqli_error($db)); 

$insertchat->close();
$db->close();

display.php

   <div id="displayMessage" class="displayMessage">
     <?php 
        $sqlchat="SELECT * FROM companychatroom 
        JOIN employees 
        ON companychatroom.employee_id=employees.employee_id";
        $resultchat=  mysqli_query($db,$sqlchat);
       while($chat=mysqli_fetch_array($resultchat)){ ?>
           <div class="row" style="padding:4%;">
               <p><?=$chat['first_name'];?> <?=$chat['last_name'];?></p> <div class="bubble"><?=$chat['message'];?></div>
           </div>
       <?php };?>

       </div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dougu2036
    dougu2036 2017-04-11 01:47
    已采纳

    OK Let's put this together into an answer:

    Modify the .POST success function to move the result into the page:

    $("#submit").click( function() {
     $.post( $("#chatForm").attr("action"), 
             $("#chatForm :input").serializeArray(), 
             function(info){ $("#displayMessage").html(info); 
       });
     clearInput();
    });
    

    Modify the chat.php to generate the mark up

    <?php
    include '../includes/config.php';
    
    // set parameters and execute
    $employee_id = $_POST['employee_id'];
    $message= $_POST['message'];
    
    // prepare and bind
    $insertchat= $db->prepare("INSERT INTO companychatroom (employee_id,message) VALUES (?, ?)");
    $insertchat->bind_param("is",$employee_id,$message);
    $insertchat->execute() or die(mysqli_error($db)); 
    $insertchat->close();
    
    $sqlchat="SELECT * FROM companychatroom 
              JOIN employees 
              ON companychatroom.employee_id=employees.employee_id";
    $resultchat=  mysqli_query($db,$sqlchat);
    $result = '';
    while($chat=mysqli_fetch_array($resultchat)){ 
        $result .= '<div class="row" style="padding:4%;">';
        $result .= '<p>';
        $result .= $chat['first_name'].' '.$chat['last_name'];
        $result .= '</p> <div class="bubble">';
        $result .= $chat['message'];
        $result .= '</div></div>';
    }
    echo $result;
    $db->close();
    

    Change display.php to

    <div id="displayMessage" class="displayMessage"></div>
    

    DISCLAIMER - this is untested, but applying the principles demonstrated should work for you.

    点赞 评论

相关推荐