我使用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();
}
?>
不知道为什么没有出错,因为它使用了一个未定义的常量,否则。