Javascript 尝试使用AJAX在不刷新的情况下提交，会以静默方式失败

我正在使用WAMP构建一个基本的AJAX web应用程序。我想要一个表单，在提交时，将输入插入数据库的表中，而不刷新页面

以下是我的表单的HTML：

<div style="float: right;" id="submitDiv">
    <form id="submitForm" action="" method="post">
        <input type="text" name="content"/>
        <input type="submit" value="send" name="submit"/>
    </form>
    <br>
    <span id="error" style="display: none; color:#F00">error</span>
    <span id="success" style="display:none; color:#0C0">success</span>
</div>

当我在输入框中键入一些文本并单击submit时，“Success”范围会出现并消失，但文本不会出现在控制台日志中；我得到的只是：

(index):21

文本不会插入到

提交

表中。我尝试调试

submit.php

，在

php.ini

中启用错误日志，如下所示：

error_log = "c:/wamp/logs/php_error.log"

但是没有生成错误日志文件

知道这里出了什么问题吗

---

更新：至少有两个错误：

.content.

应该是

$content.

，并且$db->prepare（）应该分配给一个prepared语句变量，然后调用

execute（）

。我已经对代码进行了更改。剩下的问题是，提交表单会将我带到

submit.php

，而不是停留在

index.php

您确定php正在接收POST数据吗？ 我将您的php文件更改为：

这应该是调试的第一步。 那我就换衣服

$(this).serialize

到

---

您确定php正在接收POST数据吗？ 我将您的php文件更改为：

这应该是调试的第一步。 那我就换衣服

$(this).serialize

到

---

因为您使用的是PDO:：prepare，所以不应该直接插入值

试一试

还有你的php代码

<?php
  if(isset($_POST['content']))
  {
    $db=new PDO('mysql:host=localhost;dbname=testDb;charset=utf8','root','');
    $insertSQL="INSERT INTO submission (content) VALUES (?)";
    $stmt = $db->prepare($insertSQL);
    $stmt->execute(array($_POST['content']));
    if($stmt){
       echo "You successfully inserted the value " . $_POST['content'];
    }
    else {
       echo "Error";
    }
  }
  else {
    echo "You did not submit a value";
  }
?>

---

因为您使用的是PDO:：prepare，所以不应该直接插入值

试一试

还有你的php代码

<?php
  if(isset($_POST['content']))
  {
    $db=new PDO('mysql:host=localhost;dbname=testDb;charset=utf8','root','');
    $insertSQL="INSERT INTO submission (content) VALUES (?)";
    $stmt = $db->prepare($insertSQL);
    $stmt->execute(array($_POST['content']));
    if($stmt){
       echo "You successfully inserted the value " . $_POST['content'];
    }
    else {
       echo "Error";
    }
  }
  else {
    echo "You did not submit a value";
  }
?>

---

除了不能正确使用PDO的问题外，您的问题似乎是一个简单的打字错误：

<?php
    if(isset($_POST['content']))
    {
        $content=$_POST['content'];
        $db=new PDO('mysql:host=localhost;dbname=testDb;charset=utf8','root','');
        $insertSQL="insert into submission (content) values ('".content."')";
        //        There should be a $ here to denote a variable ^
        $db->prepare($insertSQL);
        $db->execute();
    }
?>

---

除了不能正确使用PDO的问题外，您的问题似乎是一个简单的打字错误：

<?php
    if(isset($_POST['content']))
    {
        $content=$_POST['content'];
        $db=new PDO('mysql:host=localhost;dbname=testDb;charset=utf8','root','');
        $insertSQL="insert into submission (content) values ('".content."')";
        //        There should be a $ here to denote a variable ^
        $db->prepare($insertSQL);
        $db->execute();
    }
?>

在使用Ajax之前，您是否使用常规HTML表单post测试了submit.php。这总是一个好主意。@developerwk，谢谢，这让我走上了正确的方向；在我为
$insertSQL
赋值的行中，它应该是
$content.
而不是
.content.
。
$db->execute（）行抛出了这个错误：
致命错误：在第8行的C:\wamp\www\module\submit.php中调用未定义的方法PDO:：execute（）
…现在我已经修复了这个问题，它应该是
$stmt=$db->prepare（$insertSQL）$stmt.execute（）
。请注意，就AJAX而言，HTTP 2xx响应是成功的。。。如果未设置
$\u POST['content']
，它将跳过插入并返回一个带有200代码的空白响应。所以我的第一个检查是你发送了正确的数据。。。使用浏览器的开发工具（F12/Ctrl-Shift-K）检查发送到服务器的请求在脚本中包含完整url而不是相对路径时会发生什么？这也是一个愚蠢的问题，但当您转到localhost/{your project}/module/submit.php时，它是否真的加载了该脚本？在使用Ajax之前，您是否使用常规HTML表单post测试了submit.php。这总是一个好主意。@developerwk，谢谢，这让我走上了正确的方向；在我为
$insertSQL
赋值的行中，它应该是
$content.
而不是
.content.
。
$db->execute（）行抛出了这个错误：
致命错误：在第8行的C:\wamp\www\module\submit.php中调用未定义的方法PDO:：execute（）
…现在我已经修复了这个问题，它应该是
$stmt=$db->prepare（$insertSQL）$stmt.execute（）
。请注意，就AJAX而言，HTTP 2xx响应是成功的。。。如果未设置
$\u POST['content']
，它将跳过插入并返回一个带有200代码的空白响应。所以我的第一个检查是你发送了正确的数据。。。使用浏览器的开发工具（F12/Ctrl-Shift-K）检查发送到服务器的请求在脚本中包含完整url而不是相对路径时会发生什么？这也是一个愚蠢的问题，但当您转到localhost/{your project}/module/submit.php时，它是否真的加载了该脚本？谢谢，我已经解决了这个问题。现在的问题是，当我单击“发送”按钮时，数据被成功提交，但我被带到
submission.php
，而不是停留在
index.php
。这不是应该被
e.preventDefault（）
阻止的吗？@sigil我无法复制；您的表单页面上还有哪些内容？@Daedalus，我有另一个脚本将表内容加载到div中。将
preventDefault（）
移动到
$上方。ajax
阻止导航到
submit.php
，但是也会阻止数据被提交。如果您的代码是
，则无法将您带到
submission.php
，我认为您的问题是
$（此）。serialize
应该是
$（此）。serialize（）
。我用一些使用
if/else
块验证插入的示例更新了我的答案。谢谢，我解决了这个问题。现在的问题是，当我单击“发送”按钮时，数据被成功提交，但我被带到
submission.php
，而不是停留在
index.php
。这不是应该被
e.preventDefault（）
阻止的吗？@sigil我无法复制；您的表单页面上还有哪些内容？@Daedalus，我有另一个脚本将表内容加载到div中。将
preventDefault（）
移动到
$上方。ajax
阻止导航到
submit.php
，但是也会阻止数据被提交。如果您的代码是
，则无法将您带到
submission.php
，我认为您的问题是
$（此）。serialize
应该是
$（此）。serialize（）
。我用一些使用
if/else
块验证插入的示例更新了我的答案；
<script language="JavaScript">
$(document).ready(function(){
    $('#submitForm').on('submit',function(e){
        $.ajax({
            url:'/module/submit.php',
            data:$(this).serialize(), // missing () on serialize()
            type:'POST',
            success:function(data){
                console.log(data);
                if(data != "Error") {
                   $("#success").html(data).show().fadeOut(5000);
                }
                else {
                   $("#error").html(data).show().fadeOut(5000);
                }
            },
            error:function(data){
                $("#error").show().fadeOut(5000);
            }
        });
        e.preventDefault();
    });
});
</script>

<?php
  if(isset($_POST['content']))
  {
    $db=new PDO('mysql:host=localhost;dbname=testDb;charset=utf8','root','');
    $insertSQL="INSERT INTO submission (content) VALUES (?)";
    $stmt = $db->prepare($insertSQL);
    $stmt->execute(array($_POST['content']));
    if($stmt){
       echo "You successfully inserted the value " . $_POST['content'];
    }
    else {
       echo "Error";
    }
  }
  else {
    echo "You did not submit a value";
  }
?>

<?php
    if(isset($_POST['content']))
    {
        $content=$_POST['content'];
        $db=new PDO('mysql:host=localhost;dbname=testDb;charset=utf8','root','');
        $insertSQL="insert into submission (content) values ('".content."')";
        //        There should be a $ here to denote a variable ^
        $db->prepare($insertSQL);
        $db->execute();
    }
?>