2012-10-23 49 views
1

我有一个问题需要您提升我的知识。如何使用Ajax即时获取ID

我想创建一个内联编辑页面,数据存储在数据库中。 在表格“内容”中,我创建了两个用于测试目的的字段,即“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; 
} 

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

非常感谢您的帮助。

UPDATE: 感谢名单路易斯我定我的老问题,但我不知道为什么,如果我把所有的代码在一段时间只“保存”的第一个条目的按钮是否工作良好,其余不,任何提示? 目前我只测试“description_text”。

这里是“而”代码:对的index.php这部分代码移到开始,这样你就可以在脚本的其余部分使用相同瓦尔

<?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>"; 
?> 
+0

'我怎么能修改查询以获得对fly'其中ID你想从ID获取ID吗? –

回答

3

<?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(注意我)而不是mysql_query,因为这最后一个弃用。此外,但有更多的差异,您可以使用PDO

+0

谢谢你的快速回答。如果我这样做,“保存”按钮不会再出现,我不能保存:( – Mark

+0

是的,因为这个答案是不正确的...第一'行['id']'没有定义在用作ajax参数的点,第二个不需要改变'WHERE id ='$ id'“','save.php'中的第三个'$ id'应该先初始化'$ id = $ _POST ['id']'... – Reflective

+0

@ Reflective你是对的,我正在接受一半的问题,现在我正在纠正它,我还将添加一个令牌,以避免因不正当使用ajax调用而造成的损坏,但是需要一点时间 –

0

您可以使用INSERT声明与ON DUPLICATE KEY UPDATE。但是你应该让你在数据库中的UNIQUE列为id

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

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

INSERT statement MySql doc page

0

而不是简单地呼应$行[“身份证”],呼应其与特定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 
     },