Question

我正在使用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();
    }
?>

当我在输入框中键入一些文本并单击“提交”时，“成功”范围将显示并淡出，但文本不会出现在控制台日志中;我得到的是：

(index):21

文本未插入submission表。我尝试通过在submit.php中启用错误日志来调试php.ini：

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

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

知道这里出了什么问题吗？

更新：至少有两个错误：.content.应为.$content.，并且应将$ db-＆gt; prepare（）分配给预先准备好的语句变量，然后调用execute() 。我在代码中做了我的更改。剩下的问题是，提交表单会将我带到submit.php而不是index.php。

Answer 1

由于您使用的是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";
  }
?>

Answer 2

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

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

这应该是您调试的第一步。然后我会改变

$(this).serialize

到

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

Answer 3

除了没有正确使用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提交而不刷新，无声地失败

3 个答案: