функция 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 


$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»:

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

Answer 5

проще всего запустить ваш jquery после завершения загрузки DOM. Я также столкнулся с подобной проблемой. Просто добавьте функцию, которая будет вызвана внутри:

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