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;">

P.S。我建议您使用JavaScript与内联处理程序绑定事件处理程序。

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

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

Answer 2

它可能起作用（或POST在两种情况下都失败了。）

要查看它是否真的有效，您的警报应该在回调中 - 因为这是在请求成功时将运行的代码。

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

总是值得启动浏览器的开发者工具，以查看网络请求并检查它是否有效。

Answer 3

这几乎肯定与$.post异步执行这一事实有关，而且你没有正确地考虑到这一点。 alert暂停执行，这会让你花费一些时间让post完成，这样以后需要其结果的任何东西都可以实际访问该结果。删除alert会删除此暂停并中断任何依赖此副作用的内容。（换句话说，需要post结果的东西正在post完成之前执行。）

您应该执行任何依赖于传递给它的回调中$.post的结果的操作：

$.post("post.php", {input: input, user: user}, function(data) {
    // do anything that relies on this post here
});

Answer 4

你在评论中说你有：

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

在这种情况下，表格将通过正常方式发布。当你有一个警报时，ajax调用能够成功，但没有警报，正常的表单提交可能会阻止ajax调用。

您应该更改按钮，使其不是“提交”按钮：

<input type="button" ...

或者通过在“onclick”中返回false来阻止正常表单提交：

<input ... onclick="SubmitForm(); return false;">

Answer 5

最简单的方法是在DOM加载完成后运行你的jquery。我也遇到过类似的问题。只需添加要调用的函数：

 $(window).load(function(){
    // your function here. 
 });

Answer 6

正如Rocket Hazmat所提到的，当您的代码等待来自Ajax调用的结果时，许多令人费解的问题来自异步模式。问题来自于代码在Ajax查询完成之前继续。

使用同步模式强制等待Ajax调用的答案。使用jQuery时，jQuery.ajax()支持将async选项设置为false：async: false（而不是默认值：true）。

有些库的方法忘记了实现同步调用的可能性。作为一个沉默的＆＃34;除了添加alert(" ");之类的调用之外，在这种情况下可能的解决方法是添加一个触发静音的setTimeout（），比如向控制台写一些东西。它不是＆＃34;清洁＆＃34;代码，但可以是有用的。更多详情：https://stackoverflow.com/a/49835054

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

6 个答案: