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

时间:2016-11-28 15:59:24

标签: javascript php jquery mysql ajax

我想在表格中制作可编辑的单元格,然后点击“输入”更新数据库而不刷新整页。

首先,我从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...
}

但这就是我的全部。

1 个答案:

答案 0 :(得分:1)

除非您使用AJAX,否则无法刷新。

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

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

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