即使调用成功，Ajax 调用也总是返回错误

Question

我正在尝试掌握 Ajax 调用的窍门，但我正在努力实现基本的代码和平 :)

即使调用似乎成功，我也会不断收到错误警报。 我尝试调试代码并添加了一些断点，并注意到 done-function 确实执行了。 form-info 已被写掉，并且从 php-script 返回了一个字符串。 有一段时间，文本确实出现了，但在完成功能后消失了。 调试时我没有收到错误消息。只有在正常运行脚本时才会出现。

任何帮助将不胜感激。

<div id="formDiv">
<form method="post" id="form">
<label for="title">Title: </label>
<input type="text" name="title" id="title" />
<label for="composer">Composer: </label>
<input type="text" name="composer" id="composer" />
<label for="link">Link: </label>
<input type="text" name="link" id="link" />
<label for="description">Description: </label>
<input type="text" name="description" id="description" />
<input type="submit">
</div>

<div id="outerDiv">
    <p id="p"></p>
</div>

<script>
$("#form").submit(function(){
    var postData = $(this).serializeArray();
    $.ajax({
    url: "test.php",
    type: "POST",
    data: postData,
    dataType: "text"    
    })
    .done(function(data){
        $("#p").text(data);
    })
    .fail(function(){
        alert("Error!");
    });
    });

</script>

test.php

<?php   
$dbc = mysqli_connect('localhost', 'root', '', 'db');
if ($dbc->connect_error) {
die('Connect Error: ' . $dbc->connect_error);
}

$title = $_POST['title'];
$composer = $_POST['composer'];
$link = $_POST['link'];
$description= $_POST['description'];

$query = "INSERT INTO table(Titel, Componist, Link, Description) VALUES ('$title', '$composer', '$link', '$description')";
mysqli_query($dbc, $query);


$resultquery = mysqli_query($dbc,"SELECT * FROM table");
$result = "";
while($row = mysqli_fetch_assoc($resultquery)){
    $result .= $row["Titel"]." | ".$row["Componist"]." | ".$row["Link"]." | ".$row["Description"]."\n";
}

echo $result;
mysqli_close($dbc);

?>

Answer 1

您可以尝试使用console.log，而不是提醒。 你也可以在 faile 函数中添加参数以查看来自服务器的内容

funcation fail( jqXHR, textStatus, errorThrown ) {
    console.log("textStatus: " + textStatus);
    console.log("errorThrown: " + errorThrown);
}

Answer 2

我怀疑你的字段名和表名是否写对了

INSERT INTO db(Titel, Componist, Link, Description)

标题拼写错误，并且您将数据插入到表中，而是将它们插入到数据库中。这是错误的。添加您的表名

Answer 3

在尝试了很多不同的事情之后，这似乎有效：

我已将 action 属性添加到我的表单标签中

<form method="post" id="form" action="test.php">

并在表单上添加了 preventDefault() 并更改了错误处理

<script>
$("#form").submit(function(e){
    var postData = $(this).serializeArray();
    $.ajax({
    url: "test.php",
    type: "POST",
    data: postData,
    dataType: "text"    
    })
    .error(function( jqXHR, textStatus, errorThrown ) { console.log(errorThrown); })
    .done(function(data){
        $("#p").text(data);
    })
    e.preventDefault();
    });

</script>

那么为什么要让它工作的 action 属性是必需的呢？

Answer 4

使用success 和error 回调而不是done 和失败尝试以下sn-p。

$("#form").submit(function(){
    var postData = $(this).serialize();
    $.ajax({
        url: "test.php",
        type: "POST",
        data: postData,
        dataType: "text", 
        success: function(data){
             $('#p').text(data);
        },
        error: function(){
            alert("Error!");
        }   
});