Question

我正在尝试使用PHP和MySQL创建动态AJAX函数，但到目前为止收效甚微。其目的是更新数据库中的记录，而无需刷新页面或更改为其他页面。

在包含表单的页面上，我有以下代码：

// jQuery

<script type="text/javascript">
<?php 

$sql = "SELECT * from pm_schedule";
$result = $pdo->query($sql);

foreach ($result as $row) 
{
echo 
"$(document).ready(function() {
 $('#updatebtn".$row['id']."').click(function() {
 $('#result".$row['id']."').show('slow').delay(4000).hide('slow')
 $.post('process.php', $('#updateform".$row['id']."').serialize()) 
 });    
return false;   
});";
}
?>
</script> 

// form

$sql = "SELECT * from pm_schedule";
$result = $pdo->query($sql);
foreach ($result as $row) 
{
echo 
'<form id="updateform'.$row['id'].'">
<div class="tbl_header">'.$row['task'].'</div>

Due Date: 
<script>
$(function() {
$( "#datepicker'.$row['id'].'" ).datepicker({ minDate: -0,  
dateFormat: \'dd/mm/yy\', maxDate:  new Date(2013, 1,22) })
});
</script>
<input type="text" id="datepicker'.$row['id'].'" style="width: 100px; height: 10px;" value="'.$row['duedate'].'" name="duedate"/>&nbsp;

Status:
<select style="width: 125px;" name="status">
<option>'.$row['status'].'</option>
<option>----</option>
<option>Pending</option>
<option>In Progress</option>
<option>Complete</option>
</select>
&nbsp;

<input type="hidden" name="id" value="'.$row['id'].'">
<input type="submit" id="updatebtn'.$row['id'].'" value="Update" 
style="width: 100px;"/>
</form>

<div id="result'.$row['id'].'" style="display: none; color: red">
Update successful!
</div>
<p>';}

在负责处理（process.php）的页面上，我有以下代码：

<?php
$name = mysql_real_escape_string($_POST["name"]);
$status = mysql_real_escape_string($_POST["status"]);
$id = mysql_real_escape_string($_POST["id"]);

$sql = "UPDATE pm_schedule SET name=?, status=?, id=? WHERE id=?";
$q = $conn->prepare($sql);
$q->execute(array($name,$status,$id));
?>

我做错了什么？

Answer 1

return false在$(document).ready上调用的函数中，而不在点击处理程序中，所以我想这会导致表单在完成clickhandler之后仍然提交。也许把这句话放一行：

echo 
"$(document).ready(function() {
   $('#updatebtn".$row['id']."').click(function() {
     $('#result".$row['id']."').show('slow').delay(4000).hide('slow');
     $.post('process.php', $('#updateform".$row['id']."').serialize());
     return false;
   }); 
 });";

正如ripa所说，还有一些;也应该有帮助。

Answer 2

将;放在此处

foreach ($result as $row) 
{
  echo 
  "$(document).ready(function() {
    $('#updatebtn".$row['id']."').click(function() {
    $('#result".$row['id']."').show('slow').delay(4000).hide('slow');
    $.post('process.php', $('#updateform".$row['id']."').serialize());
    });    
   return false;   
     });";
 }

jQuery AJAX问题 - 页面在提交和数据未发送时保持刷新

2 个答案: