jQuery Ajax不将Post数据发送到PHP文件

Question

我正在尝试使用AJAX将变量从JavaScript发送到PHP文件，但无法正常工作。 我已经仔细研究了所有类似的问题（有一堆），但尚未找到解决方案。

这是我的第一个php文件（带有表单，将数据发送到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（AJAX调用所在的位置） ：

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

当我重定向到loadSketch.php（通过成功的ajax调用）时，“ nothing in post variable”一无所有。 有什么想法我做错了吗？

非常感谢任何见解！ :)

Answer 1

songURL中没有任何内容，因为当您的Ajax函数返回时，它会重定向到您刚刚发布到的同一页面。 它正在对该PHP文件创建一个新的HTTP请求，而没有数据发送给它。 删除控制台消息上的注释，您将看到正确的回显消息。

$.ajax({
type: "POST",
url: "loadSketch.php",
data: content,
success: function (data, text) {
    alert("success");
    console.log(data);

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

Answer 2

您不应使用“提交”按钮，因为它会使整个页面重新加载。 而是使用常规按钮并处理调用AJAX函数的click事件。

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);
    }
});

然后只需在loadSketch.php选择POST参数并使用它们即可。

PHP：

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