javascript - 从表格单元格更新数据库而不刷新页面

Question

我想在表格中创建可编辑单元格，然后当点击“输入”时更新数据库而不刷新整个页面。

首先，我从 sql 查询填充我的表，如下所示:

//up there - no important things

echo'<table> 
        <tr>';                  
        while($row = mysql_fetch_assoc($result))
        {                       
            foreach($row as $key=>$value)
            {
               if(!($value == "id_p" || $value == "pass" || $value == "salt" || $value == "login"))
               {               
               echo'<th>'.$value.'</th>';
               }
            }
        } 
        echo '</tr>';

        if(mysql_num_rows($result2) > 0)
        {
            while($row2 = mysql_fetch_assoc($result2))
            {                           
                echo '<tr>';
                foreach($row2 as $key=>$value)
                {                           
                    if(!($key == "id_p" || $key == "pass" || $key == "salt" || $key == "login"))
                       echo'<td>'.$value.'</td>';
                }
                echo '</tr>';
            }
        }
        else
            echo '<tr><td colspan="9">Brak wyników.</td></tr>';

echo'</table>';

然后我更改单元格<td>用脚本(不是我的脚本)到

$(function(){
        $("td").click(function(event)
        {
            if($(this).children("input").length > 0)
                    return false;
            var tdObj = $(this);
            var preText = tdObj.html();
            var inputObj = $("<input type='text' />");
            tdObj.html("");
            inputObj.width(tdObj.width())
                .height(tdObj.height())
                .css({border:"0px",fontSize:"17px"})
                .val(preText)
                .appendTo(tdObj)
                .trigger("focus")
                .trigger("select");
            inputObj.keyup(function(event){
                if(13 == event.which) // if ENTER
                { 
                    var text = $(this).val();
                    tdObj.html(text);

 // SOMETHING HERE TO UPDATE DATABASE??

                }
                else if(27 == event.which) {  // if ESC
                        tdObj.html(preText);
                }
              });
                inputObj.click(function(){
                        return false;
                });
        });
});

现在我被困住了。我如何发送新数据进行更新(无需刷新整个页面)？我不太擅长js/ajax。我创建了新页面update_db.php

if(isset($_POST['post_name']))
{
   echo 'processing...';
  //mysql things...
}

但这就是我所拥有的一切。

Answer 1

除非使用 AJAX，否则您无法在不刷新的情况下执行此操作。

if(13 == event.which) // if ENTER
{ 
    var text = $(this).val();
    tdObj.html(text);
    $.POST("update_db.php", { tdVal: text });
}

您现在可以在 update_db.php 的 $_POST 中获取 tdVal

此外，我建议使用 mysqli 而不是 mysql，因为它已从 php 7 中删除。