Senden Sie ein Formular mit JQuery Ajax

Question

Fiddle Und Code:

$("form.signupform").submit(function(e) { 
 
    var data = $(this).serialize(); 
 
    var url = $(this).attr("action"); 
 
    var form = $(this); // Add this line 
 
    $.post(url, data, function(data) { 
 
    try { 
 
     data = JSON.parse(data); 
 
\t \t $(.result).html(data.result + " Watchlist"); 
 

 
    } catch (e) { 
 
     console.log("json encoding failed"); 
 
     return false; 
 
    } 
 
}); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="result"></p> 
 
<form class="signupform" method="post" action="admin/signupinsert.php" onsubmit="this.onsubmit=function(){return false;}"> 
 

 
    <input type="text" name="firstname" /> 
 
\t <input type="submit" value="Sign Up"/> 
 

 
</form>

admin/signupinsert.php Code:

// Insert into DB code in PHP 

$response = new \stdClass(); 
$response->result = "".$result.""; 
die(json_encode($response)); 

ich dieses Formular abschicken Ich versuche mein JQuery Ajax-Code verwenden. Und die Datei signupinsert.php gibt einen Wert in der Variablen $ result zurück. Ich versuche, es innerhalb <p class="result"></p>

zu drucken, aber der Code leitet Benutzer zur signupinsert.php Seite um.

Was ist los?

Answer 1

müssen Sie die Standardaktion Absenden des Formulars verhindern

$("form.signupform").submit(function(e) { 

    e.preventDefault(); // <-- add this 

    var data = $(this).serialize(); 
    var url = $(this).attr("action"); 

auch, Rückkehr in Ihre PHP-Datei die richtige JSON und vermeiden, dass die Reaktion in Javascript-Parsing mit JSON.parse(data);

die Ausgabe in Ihre PHP-Datei sollte so aussehen

$response = new \stdClass(); 
$response->result = $result; 

header('Content-Type: application/json'); 
print json_encode($response); 

und in Ihrem success Handler verarbeiten nur die data Parameter als normale json Objekt

$.post(url, data, function(data) { 
    $(.result).html(data.result + " Watchlist"); 
} 

Auch nur eine Kuriosität, was diese tun soll?

$response->result = "".$result.""; 

Update:
Ich habe erkannt, warum Sie die meisten Probleme hatte:

$('.result').html(data.result + " Watchlist"); 
^ ^

sehen die fehlenden Anführungszeichen

Answer 2

Sie wegen Aktion umleiten:

action="admin/signupinsert.php" 
var url = $(this).attr("action"); 

mich?