Javascript-Funktion funktioniert nur, wenn es eine Warnung

Question

ist dieser Code ausführt post.php:

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

Aber wenn ich eine Linie entfernen, dies nicht:

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

irrational scheint, aber warum ist das passiert ?

Die PHP, die die JS-Einsätze einige Werte in die Datenbank nennen sollte:

<?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

Ihr Problem besteht darin, dass diese Funktion in einem /onclick Ereignishandler aufgerufen wird. AJAX ist asynchron, dh es läuft im Hintergrund. Wenn Sie $.post aufrufen, wird der Code fortgesetzt und der Rückruf wird irgendwann in der Zukunft aufgerufen.

Was passiert ist, dass das Formular gesendet wird, so dass die Seite umgeleitet wird. Dies geschieht, bevor der AJAX-Anruf beendet wird. Die alert pausiert den Browser, so dass der AJAX-Aufruf beendet werden kann.

Sie müssen den Browser daran hindern, die "Standard" -Aktion auszuführen.

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

P.S. Ich schlage vor, dass Sie Ereignishandler in JavaScript oder Inline-Handlern binden.

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

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

Answer 2

Wahrscheinlich funktioniert (oder die POST ist in beiden Fällen nicht an).

Um zu sehen, ob es wirklich funktioniert, sollte Ihre Warnung innerhalb des Rückrufs sein - wie das ist der Code, der ausgeführt wird, wenn die Anfrage erfolgreich ist.

Es lohnt sich immer, die Entwicklerwerkzeuge Ihres Browsers zu starten, um die Netzwerkanforderung zu sehen und zu überprüfen, ob sie funktioniert.

Answer 3

Dies ist fast sicher mit der Tatsache verbunden, dass $.postasynchron ausgeführt wird und Sie nicht ordnungsgemäß dafür verantwortlich sind. Die alert ist pausieren Ausführung, die Sie etwas Zeit für die post zu beenden, so dass alles, was sein Ergebnis später möglicherweise Zugriff auf dieses Ergebnis tatsächlich benötigt. Das Entfernen der alert entfernt diese Pause und bricht alles, was auf diesen Nebeneffekt angewiesen war. (Mit anderen Worten, etwas, das das Ergebnis der post muss ausgeführt wird, bevor der post beendet ist.)

Sie eine Aktion durchführen soll, die auf den Ergebnissen der $.post innerhalb der Rückruf beruht, die an sie übergeben wird:

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

Answer 4

Sie sagen, in einem Kommentar, die Sie:

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

In diesem Fall wird die Form durch die normalen Mittel gepostet. Wenn Sie eine Warnung haben, kann der Ajax-Aufruf erfolgreich sein, aber ohne die Warnung verhindert die normale Formularübermittlung wahrscheinlich den Ajax-Aufruf.

sollten Sie entweder die Taste ändern, damit es nicht eine Schaltfläche "Senden" ist:

<input type="button" ... 

oder die normale Form Vorlage verhindern, indem sie in der "Onclick" false Rückkehr:

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

Answer 5

Die Der einfachste Weg wäre, deine jquery zu starten, nachdem das DOM fertig geladen ist. Ich hatte auch ein ähnliches Problem. Fügen Sie einfach die Funktion hinzu, die darin aufgerufen werden soll:

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