javascript - 使用 AJAX 部分更新列表

Question

我有一个来自数据库的列表，我想实现编辑功能，在单击表列时，该列变为可编辑，在单击列外时，该值会更新。

我为此目的使用了 AJAX。我的代码如下:

Page1.php

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showEdit(editableObj) 
{
 $(editableObj).css("background","#FFF");
} 
function saveToDB(editableObj,column,id) 
{
 $.ajax(
 {
  url: "page2.php",
  type: "POST",
  data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
  success: function(data)
  {
   $(editableObj).css("background","#FDFDFD");
  }        
 });
}
</script>

我的表格的列如下:

<td contenteditable="true" onBlur="saveToDB(this, 'exmid','<?php echo $p0; ?>')"
         onClick="showEdit(this);"><?php echo $p3 ?>

注意:$p0包含mysql数据库表中行的序列号，$p3包含显示的文本。

page2.php的代码是:

<?php
include_once 'includes/db_connect.php';
?>
<?php
$result = mysql_query("UPDATE examlist1 set " . $_POST["column"] . " =     '".$_POST["editval"]."' WHERE  sno=".$_POST["id"]);
?>

问题: 当我单击该列时，它变得可编辑。在 saveToDB() 中使用 alert() 我检查了在单击列之外以及 column 和 id 的值时是否调用了该函数是正确的。

然后我尝试了 $.ajax 中的 alert() 函数，但没有被调用。我不确定 ajax 是否正在运行。这是我第一次尝试在 php 代码中使用 ajax。

请提出问题是什么以及解决方案是什么？该代码正在使用 PHP 5.4 在 Godaddy 托管的基于 Linux 的服务器上实现。

此外，我想设置失败时的背景颜色。如何在ajax block 中编写它？

Answer 1

如果您在警报时获得正确的值。在您的 page2.php 中。使用 mysqli 代替 mysql，并在 mysqli_query() 中使用 $connection 对象。

    <?php
include_once 'includes/db_connect.php';
$column=$_POST["column"];
$editval=$_POST["editval"];
$id=$_POST["id"];
$result = mysqli_query($connection,"UPDATE examlist1 SET $column='$editval' WHERE sno=$id");//$connection is database connection variable
if ($result)
 {
    echo json_encode(array('success'=>true));
}
else
{
    echo json_encode(array('success'=>false));
}
?>

这是 Javascript:尝试 100% 有效(在 if/else 语句中定义您想要的内容)

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showEdit(editableObj) 
{
 $(editableObj).css("background","#FFF");
} 
function saveToDB(editableObj,column,id) 
{
 $.ajax(
 {
  url: "page2.php",
  type: "POST",
  data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
  success: function(data)
  {
    var res=eval(data);
    //if success then
    if (res.success) 
    {
        //write JS code that you want after successful updation

     $(editableObj).css("background","#FDFDFD"); //<- according to problem
    }
    //if fails then
    else
    {
        //write JS code that you want after unsuccess
    }
  }        
 });
}
</script>