Question

我有一个问题要求您升级我的知识。

我正在尝试创建内联编辑页面，数据存储在数据库中。在“内容”表中，我创建了2个用于测试目的的字段，即“id”和“text”字段。

如果我想修改“id = 25”或id = X的字段，我知道如何手动完成，只需在MySQL查询中指定“WHERE id = 25”，但如果我有一个列表1000个条目，如何修改查询以便即时获取ID？

以下是我正在玩的代码：

index.php 档案

<style>
body {      
    font-family: Helvetica,Arial,sans-serif;
    color:#333333;
    font-size:13px;
}

h1{
    font-family: Georgia, Times, serif;
    font-size: 28px;        
}

a{
    color: #0071D8;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

:focus {
    outline: 0;
}

#wrap{
    width: 500px;
    margin:0 auto;              
    overflow:auto;      
}

#content{
    background: #f7f7f7;
    border-radius: 10px;
}

#editable {     
    padding: 10px;      
}

#status{
    display:none; 
    margin-bottom:15px; 
    padding:5px 10px; 
    border-radius:5px;
}

.success{
    background: #B6D96C;
}

.error{
    background: #ffc5cf; 
}

#footer{
    margin-top:15px;
    text-align: center;
}

#save{  
    display: none;
    margin: 5px 10px 10px;      
    outline: none;
    cursor: pointer;    
    text-align: center;
    text-decoration: none;
    font: 12px/100% Arial, Helvetica, sans-serif;
    font-weight:700;    
    padding: 5px 10px;  
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px;
    border-radius: 5px; 
    color: #606060;
    border: solid 1px #b7b7b7;  
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top,  #fff,  #ededed);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}   

#save:hover
{
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
 <script>
 $(document).ready(function() {

$("#save").click(function (e) {         
    var content = $('#editable').html();    

    $.ajax({
        url: 'save.php',
        type: 'POST',
        data: {
        content: content
        },              
        success:function (data) {

            if (data == '1')
            {
                $("#status")
                .addClass("success")
                .html("Data saved successfully")
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');   
            }
            else
            {
                $("#status")
                .addClass("error")
                .html("An error occured, the data could not be saved")
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');   
            }
        }
    });   

});

$("#editable").click(function (e) {
    $("#save").show();
    e.stopPropagation();
});

$(document).click(function() {
    $("#save").hide();  
});

 });
 </script>

</head>
<body>
<div id="wrap">

    <div id="status"></div>

    <div id="content">

    <div id="editable" contentEditable="true">
    <?php
        //get data from database.
        include("db.php");
        $sql = mysql_query("select * from content");
        $row = mysql_fetch_array($sql);     
        echo $row['id'];
        echo "<br />";
        echo $row['text'];
    ?>      
    </div>  

    <button id="save">Save</button>
    </div>

</div>
  </body>

这是 save.php 文件：

include("db.php");


$content = $_POST['content']; //get posted data
$content = mysql_real_escape_string($content);  //escape string 

$sql = "UPDATE content SET text = '$content' WHERE id = '$id' ";

if (mysql_query($sql))
{
    echo 1;
}

我知道这可能是一个愚蠢的问题，但我是新手。

提前感谢您的帮助。

更新 thanx to Luis我修复了我的旧问题，但我不知道为什么如果我把所有代码放在一段时间只有第一个条目的“保存”按钮工作正常，其余的没有，任何提示？目前我只测试“description_text”。

以下是“while”代码：

<?php 

    /////////// Now let us print the table headers //////////////// 

    $query =" SELECT * FROM gallery ORDER BY id DESC ";

    $result = mysql_query($query) or die(mysql_error());

    echo "<div style='width: 100%; text-align: center;'>";                   
    echo "<table style='margin: auto auto;'>";
    echo "<tr><th>ID</th><th>Image</th><th>Category</th><th>Description</th><th>Added on</th></tr>";

    while($ordinate = mysql_fetch_array($result))
    {

    $id     = $ordinate['id'];
    $img_name    = $ordinate['img_name'];
    $category     = $ordinate['category'];
    $description_text = $ordinate['description_text'];
    $insert_datetime    = $ordinate['insert_datetime'];

    echo "<tr><td style='width: 20px;'>".$id."</td><td style='width: 210px;'><img src='../../upload/content/uploaded_images/". $img_name ."' width='200px'></td><td style='width: 100px;'>".$category."</td><td style='width: 100px;'><div id='status'></div><div id='content'><div id='editable' contentEditable='true'>".$description_text."</div><button id='save'>Save</button></div></td><td style='width: 100px;'>".$insert_datetime."</td></tr>";        

    }
    echo "</table><br /><br /></div>";
?>

Answer 1

index.php上的

将这部分代码移到开头，所以你可以在脚本的其余部分使用相同的变量。

<?php
    //get data from database.
    include("db.php");
    $sql = mysql_query("select * from content");
    $row = mysql_fetch_array($sql);     
    // echo $row['id'];    but keep this ones in its original place inside their <%php %> tags
    // echo "<br />";
    // echo $row['text'];
?>

稍后在ajax调用中，插入此PHP行：

    data: {
    content: content
    <?php
    echo ", id: ".$row['id'];
    echo ", token: '".md5('my SALT text'.(int)$row['id'])."'";    // strongly!!! recomended, not mandatory
    ?>
    },

和save.php

    $id = (int)$_POST['id'];                    // (int)  sanitizes  id
    $token = $_POST['token'];
    if(md5('my SALT text'.$id)!=$token) die();  // or whatever but do not execute update
                                                // perhaps  echo 0; die();

    // ... rest of your code ....
    $sql = "UPDATE content SET text = '$content' WHERE id = $id"

该令牌可以防止有人使用您的save.php作为在桌面上的每个帖子上注入任何内容的风险。

至少，建议：使用mysqli_query（注意i）而不是mysql_query，因为这个最后一个被弃用了。此外，但有更多不同之处，您可以使用PDO

Answer 2

您可以将INSERT语句与ON DUPLICATE KEY UPDATE一起使用。但是你应该在数据库中使id列为UNIQUE。

使用INSERT INTO `table` (id, text) VALUES (id1, text1), (id2, text2), ...;语法

使用VALUES生成$_POST周期后的部分。

INSERT statement MySql doc page

Answer 3

不是简单地回显$ row ['id']，而是在具有特定id的HTML元素中回显它，以便可以从jQuery访问它并且可以发布。

<span id="idfield"><?php echo $row['id']; ?></span>
<button id="save">Save</button>
</div>

然后，在javascript中：

 $("#save").click(function (e) {         
    var content = $('#editable').html();    
    var id = $('#idfield').html();

将其用作POST中的参数：

    $.ajax({
      url: 'save.php',
      type: 'POST',
      data: {
       content: content,
       id: id
      },

如何使用Ajax动态获取ID

3 个答案: