尝试使用AJAX提交而不刷新，静默失败 - trying to use AJAX to submit without refresh, fails silently

我使用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>

执行AJAX提交的Javascript:

<script language="JavaScript">
$(document).ready(function(){
    $('#submitForm').on('submit',function(e){
        $.ajax({
            url:'/module/submit.php',
            data:$(this).serialize,
            type:'POST',
            success:function(data){
                console.log(data);
                $("#success").show().fadeOut(5000);
            },
            error:function(data){
                $("#error").show().fadeOut(5000);
            }
        });
        e.preventDefault();
    });
});
</script>

submit.php用于插入POST内容:

<?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."')";
        $stmt=$db->prepare($insertSQL);
        $stmt->execute();
    }
?>

当我在输入框中输入一些文本并点击提交时，"Success"出现并消失，但文本没有出现在控制台日志中;我得到的是:

(index):21

文本没有插入submission表。我尝试通过启用php.ini中的错误日志来调试submit.php:

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

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

你知道这里出了什么问题吗?

UPDATE:至少有两个错误:.content.应该是.$content.，并且$db->prepare()应该分配给一个准备好的语句变量，然后调用execute()。我已经对代码做了修改。剩下的问题是，提交表格会把我带到submit.php，而不是留在index.php。

既然使用的是PDO::prepare，那么就不应该直接插入值。

试

<?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']));
  }
?>

我想你的问题是$(this).serialize应该是$(this).serialize()。您还应该在js和php代码中添加一些检查(if/else)来验证插入是否有效。

你的js代码可以是

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

<?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正在接收POST数据吗?我会改变你的php文件如下:

if(isset($_POST['content']) { //do stuff } else { echo "FAIL" }

这应该是调试的第一步。然后我修改

$(this).serialize

$("#submitForm").serialize();

除了没有正确使用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();
    }
?>

不知道为什么没有出错，因为它使用了一个未定义的常量，否则。