jQuery Ajax nicht senden Post-Daten in PHP-Datei

Question

Ich versuche, Variablen von meinem JavaScript in eine PHP-Datei mit AJAX zu senden, aber es funktioniert nicht. Ich habe mir alle ähnlich gestellten Fragen angesehen (es gibt eine Menge), aber ich muss noch eine Lösung finden.

Dies ist meine erste PHP-Datei (eine mit der Form, sendet Daten an JavaScript):

<option value="imageOne" data-cuteform-image='assets/SketchThumbnails/imageOne.png></option> 
<input id="inputURLID" type="text" name="inputURL"> 

<button type="submit" onclick="handleInputs(document.getElementById('sketch').value, document.getElementById('inputURLID').value); return false;">Submit</button> 

JavaScript (wo AJAX-Aufruf ist):

var content = { 
    'sketch': pickedSketch, 
    'songUrl': enteredURL 
}; 
$.ajax({ 
    type: "POST", 
    url: "loadSketch.php", 
    data: content, 
    success: function (data, text) { 
     // alert("success"); 
     // console.log(data); 
     // console.log(text); 

     window.location.href = "loadSketch.php"; 

    }, 
    error: function (request, status, error) { 
     alert(request.responseText); 
    } 
}); 

PHP (loadSketch.php):

if(isset($_POST['songUrl'])) 
{ 
    $temp = $_POST['songUrl']; 
    echo $temp; 
    echo "received AJAX data"; 
} else { 
    echo "nothing in post variable"; 
} 

Wenn ich nach loadSketch.php (vom erfolgreichen Ajax-Aufruf) umgeleitet wird, wird "nichts in Post-Variable" ausgegeben. Irgendwelche Ideen, was ich falsch mache?

Jeder Einblick wird sehr geschätzt! :)

Answer 1

Nichts ist in songURL, denn wenn Ihre Ajax-Funktion zurückkehrt, wird auf die gleiche Seite umgeleitet, auf die Sie gerade gepostet haben. Es erstellt eine neue HTTP-Anfrage an diese PHP-Datei, an die keine Daten gesendet werden. Entfernen Sie die Kommentare in den Konsolennachrichten und Sie sehen die korrekten Echonachrichten.

Answer 2

Sie sollten keinen Submit-Button verwenden, da die ganze Seite neu geladen wird; Verwenden Sie stattdessen normale Schaltflächen und behandeln Sie die Klickereignisse, die Ihre AJAX-Funktion aufrufen.

HTML:

<button onclick="doAjaxFunction(param1, param2);">Calling Ajax Function<button> 

JavaScript:

function doAjaxFunction(val1,val2){ 
    $.ajax({ 
    type: "POST", 
    url: "loadSketch.php", 
    dataType: "json", 
    data: {"'value1':'"+ val1+"', 'value2':'"+ val2+"'"}, 
    success: function (data, text) { 
    // alert("success"); 
    // console.log(data); 
    // console.log(text); 
    window.location.href = "loadSketch.php"; 
    }, 
    error: function (request, status, error) { 
     alert(request.responseText); 
    } 
}); 

Dann einfach Ihre POST-Parameter in loadSketch.php holen und sie verwenden.

PHP:

$x = $_POST['value1']; 
$y = $_POST['value2'];