Question

大家好我创建了一个shoutboux，但我不知道如何在提交后不重新加载页面的情况下发送消息..

的index.php

 /* TOP OF THE PAGE*/
<?php 

    //create the select query
    $STH = $db->prepare("SELECT * FROM chat");

    $STH->execute();
?>
/* TOP OF THE PAGE*/

<div class="container">
        <div class="row all">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3>TEST Shoutbox</h3>
                    </div>
                    <div id="shouts" class="shouts">
                        <div class="panel-body">
                            <ul class="list-group">
                                <?php while ($row = $STH->fetch(PDO::FETCH_ASSOC)) { ?>
                                        <li class="list-group-item"><span><?php echo $row['time'] ?> - </span><strong><?php echo $row['user'] ?>:</strong> <?php echo $row['message'] ?></li>
                                <?php } ?>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <?php if (isset($_GET['error'])) { ?>
                                <div class="alert alert-danger">
                                    <?php echo $_GET['error'] ; ?>
                                </div>
                        <?php } ?>
                        <form action="process.php" method="post">
                            <div class="row">
                                <div class="col-xs-12 col-sm-6">
                                    <input type="text" class="form-control" name="user" placeholder="Enter Your Name">
                                </div>
                                <div class="col-xs-12 col-sm-6">
                                    <input type="text" class="form-control" name="message" placeholder="Enter A Message">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <input class="btn btn-primary shout-btn" type="submit" name="submit" value="Shout It Out">
                                </div>
                            </div>              
                        </form>
                    </div>
                </div>
            </div>
        </div>      
    </div>

PROCESS.PHP

<?php 

    //check if form submitted
    if (isset($_POST['submit'])) {

        $user = $_POST['user'];
        $message = $_POST['message'];

        //set timezone
        date_default_timezone_set('America/New_York');
        $time = date('H:i:s');

        if (!isset($user) || $user == '' || !isset($message) || $message == '') {

            $error = "Please fill in your name and a message";
            header('Location: index.php?error='.urlencode($error));
            exit();

        } else {

            $STH = $db->prepare("INSERT INTO chat (user, message, time) VALUES (:user, :message, :time)");

            $STH->bindValue(':user', $user);
            $STH->bindValue(':message', $message);
            $STH->bindValue(':time', $time);

            $STH->execute();

            header('location: index.php');
            exit();
        }
    }

?>

P.S：我包含了数据库详细信息

有人可以帮我这个吗？如何在不重新加载页面的情况下发送消息.. :(

编辑：

我把它放在 index.php 中，我将id =“submit”归因于提交按钮：

        <script>
$(document).ready(function(){

$('#submit').click(function(){

$.post("process.php").serialize(),  function(response) {
$('#shouts').reload;
});
return false;

});

});
</script>

但是没有用..

Answer 1

You need to use the Ajax Preventdefault() funtion.

event.preventDefault()

Usage

$(".button").click(function(e){
    e.preventDefault();
    return false;
});

A similar question I asked a while back.

what-is-possible-with-event-preventdefault-and-ajax-post-method

Answer 2

Instead of letting your form POST the data, try sending it to your process script with an XHTTP request (commonly called AJAX). jQuery can help simplify this. Usually I will post the data via AJAX and have the script I am posting to return a JSON-encoded response (indicating success / failure of the operation, any user-facing messages that should be displayed, etc). You can also use AJAX to poll for new messages from your database periodically. Of course there is much to consider but for the sake of experimentation and learning, this might help get you started. Good luck!

无需重新加载页面发送

2 个答案:

Usage