Javascript函数仅在有警报时才有效

Question

此代码执行post.php:

function SubmitForm() {
    var input = $("#input").val();
    var user = "anon";
    $.post("post.php", {input: input, user: user}, function(data) {});
    alert("hello");
}

但如果我删除一行,则不会:

function SubmitForm() {
    var input = $("#input").val();
    var user = "anon";
    $.post("post.php", {input: input, user: user}, function(data) {});
}

似乎不合理,但为什么会发生这种情况？

JS应该调用的PHP将一些值插入到数据库中:

<?php


$dbhost = "xxx";
$dbname = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";

// Create connection
$con = mysqli_connect($dbhost, $dbuser, $dbpass);

// Check connection
if (!$con) {
    die("Database connection failed: " . mysqli_error());
}

// Select database
$db_select = mysqli_select_db($con, $dbname);

// Check selection
if (!$db_select) {
    die("Database selection failed: " . mysqli_error());
}

$message = $_POST["input"];
$user = $_POST["user"];
echo $message;
echo $user;

$query = "INSERT INTO posts (user, message) VALUES ('$user', '$message')";
mysqli_query($con, $query);
?>

Answer 1

您的问题是在onsubmit/ onclick事件处理程序中调用此函数.AJAX是异步的,这意味着它在后台运行.当您调用时$.post,代码将继续,并在将来的某个时刻调用回调.

发生的事情是表单正在提交,因此页面正在被重定向.这是在AJAX调用完成之前发生的.该alert停顿的浏览器,所以它给人的AJAX调用一个机会来完成.

您需要阻止浏览器执行"默认"操作.

<input type="submit" class="button" id="button_post" value="POST" onclick="SubmitForm(); return false;">

PS我建议你绑定JavaScript中的事件处理程序与内联处理程序.

<input type="submit" class="button" id="button_post" value="POST">

<script>
$(function(){
    $('#button_post').click(function(e){
        e.preventDefault();
        SubmitForm();
    });
});
</script>