发出使用JavaScript将PHP数据加载到HTML文件的问题

Question

I am writing a Shoutbox. 我正在写一个Shoutbox。 The HTML file has 2 buttons: refresh - refreshes all the messages and submit - submits message and refreshes page messages. HTML文件具有2个按钮：刷新-刷新所有消息并提交-提交消息并刷新页面消息。

Everything works perfectly but one issue. 一切正常，但有一个问题。 When I click submit, the page doesn't refresh with latest message. 当我单击提交时，页面不会刷新最新消息。 But everything works fine afterwards. 但是事后一切正常。

HMTL file: HMTL文件：

<head>
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">    </script> 
        <script src="script.js"></script>
</head>

<body>
<div id="wrap">
    <div id="input">
    <form>
        <input type="text" name="name" id="name" placeholder="Enter a name">
        <input type="text" name="message" id="message" placeholder="Enter a message">
        <input type="button" id="refresh" value="Refresh">
        <input type="button" id="submit" value="Submit">
    </form>
</div>
<div id="messages">
        <ul id="messageList"></ul>
</div>
</div>

</body>
</html>

JavaScript File JavaScript文件

$(document).ready(function() {
    $('#refresh').on('click', function(){
        $("#messageList").load( "messages.php");
        event.preventDefault();
    });
});

$(document).ready(function() {
    $('#submit').on('click', function(){
        var name = $("#name").val();
        var message = $("#message").val();
        var dataString = 'name='+ name + '&message='+ message;

        $.post( "newmessage.php", dataString );

        event.preventDefault();

        $("#messageList").load( "messages.php");

        event.preventDefault();
    });
});

messages.php: messages.php：

<?php
//error_reporting(0);
include 'database.php';

//Create Select Query
$query = "SELECT * FROM shoutbox ORDER BY time DESC";
$shouts = mysqli_query($con, $query);


   while($row = $shouts->fetch_object()) { 
            $time = $row->time;
            $name = $row->name;
            $message = $row->message;

            echo "<li>".$time." - <b>".$name.": </b>".$message."</li>";
}

$con->close();

?>

newmessage.php: newmessage.php：

<?php
//error_reporting(0);
include 'database.php';

if(isset($_POST['name']) && isset($_POST['message']))
{
    $name = '"'.$_POST['name'].'"';
    $message  = '"'.$_POST['message'].'"';

    $datum = new DateTime();
    $timeStamp = $datum->format('Y-m-d H:i:s');

    $insert_row = $con->query("INSERT INTO shoutbox(name, message) VALUES($name, $message)");
}

if($insert_row) {
} else {
    die('Error : ('. $con->errno .') '. $con->error);
}

$con->close();

?>

Answer 1

From this answer : 从这个答案：

I'd recommend strongly that you take the time to understand the nature of asynchronous calls within JavaScript 我强烈建议您花一些时间来了解JavaScript中异步调用的性质

Please follow the link, there's more info there. 请点击链接，那里有更多信息。

To your code to work: 要使您的代码正常工作：

$(document).ready(function() {
  $('#submit').on('click', function(event){ // << event was missing
    var name = $("#name").val();
    var message = $("#message").val();
    var dataString = 'name='+ name + '&message='+ message;
    event.preventDefault();
    $.post("newmessage.php", dataString, function(){
      // this function is a callback, called on AJAX success
      $("#messageList").load( "messages.php");
    });
  });
});

Answer 2

This should do the job. 这应该做的工作。 Make sure if you are using event.preventDefault(), you pass the event variable to the function. 确保是否使用event.preventDefault（），将事件变量传递给函数。 This can also test if the message was posted successfully 这也可以测试消息是否成功发布

$('#submit').on('click', function(event){
        event.preventDefault();
        var name = $("#name").val();
        var message = $("#message").val();
        var dataString = 'name='+ name + '&message='+ message;

        var posting=$.post( "newmessage.php", dataString );

        posting.done(function(data){
              $("#messageList").load( "messages.php");
        });
        posting.fail(function(){
            alert("Something is not right with your message. Please Try Again")
        })

    });

发出使用JavaScript将PHP数据加载到HTML文件的问题

问题描述

2 个解决方案

解决方案1
1 2015-05-08 18:26:35

解决方案2
0 2015-05-08 18:42:49

发出使用JavaScript将PHP数据加载到HTML文件的问题

问题描述

2 个解决方案

解决方案1 1 2015-05-08 18:26:35

解决方案2 0 2015-05-08 18:42:49

解决方案1
1 2015-05-08 18:26:35

解决方案2
0 2015-05-08 18:42:49