Question

我正试图解决Ajax调用问题，并且我正在努力实现基本的代码安静：）

即使通话似乎成功，我仍然会收到错误警报。我试图调试代码并添加了一些断点，并注意到done-function确实执行了。 form-info已被写出，并从php脚本返回一个字符串。短暂的文本确实出现但在完成功能之后消失了。在调试时我没有收到错误消息。它只在正常运行脚本时出现。

非常感谢任何帮助。

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

那为什么动作属性必须要起作用呢？

Answer 4

使用success和error回调而不是done尝试以下代码段并失败。

$("#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!");
        }   
});

即使成功调用，Ajax调用也始终返回错误

4 个答案: