所属分类:PHP实例-Ajax,常用实例教程,MySQL
首先我们引入jQuery库、拖动插件jqueryui及弹出层插件fancybox:
<script type="text/javascript" src="jquery.js"></script> <script type='text/javascript' src='js/jquery-ui.min.js'></script> <script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>
然后我们在notes表里面读取便签条:
$query = mysql_query("select * from notes order by id desc limit 0, 50"); while ($row = mysql_fetch_array($query)) { list($left, $top, $zindex) = explode('|', $row['xyz']); $time = strtotime($row['addtime']); $notes.= ' <div class="note ' . $row['color'] . '" data-id=' . $row['id'] . ' style="left:' . $left . 'px;top:' . $top . 'px;z-index:' . $zindex . '" id="note_' . $row['id'] . '"> <span class="data">' . $row['id'] . '.</span>' . htmlspecialchars($row['content']) . ' <p class="user">——' . htmlspecialchars($row['name']) . '<br/>(' . tranTime($time) . ')</p><a class="close"></a> </div>'; }
添加便签条:
$("#addbtn").live('click', function(e) { var txt = $("#note_txt").val(); var user = $("#user").val(); var color = $("#mycolor").val(); if (txt == "") { $("#msg").html("内容不能为空"); $("#note_txt").focus(); return false; } if (user == "") { $("#msg").html("请输入您的姓名!"); $("#user").focus(); return false; } var left = 0; var top = 0; var data = { 'zIndex': ++zIndex, 'content': txt, 'user': user, 'color': color, 'left':left, 'top':top }; $.post('posts.php', data, function(msg) { zIndex = zIndex++; //alert(zIndex); if (parseInt(msg)) { var str = "<div class='note " + color + "' style='left:"+left+";top:"+top+";z-index:" + zIndex + "'><span class='data'>" + msg + ".</span>" + txt + "<p>——" + user + "(刚刚)</p></div>"; $(".container").append(str); make_draggable($('.note'));  nbsp; $.fancybox.close(); } else { $("#msg").html(msg); } }); e.preventDefault(); });
删除便签条:
$(".note").find(".close").click(function() { var id = $(this).parents(".note").attr("data-id"); $.get("ajax.php", {id: id}, function(data) { if (data == 1) { $("#note_"+id).fadeOut(); } }, "json") })
posts.php
后台PHP接收ajax请求后,验证数据合法性,将数据插入数据表中,成功后返回插入的id值,返回给前台。
$left = intval($_POST['left']); $top = intval($_POST['top']); $txt = stripslashes(trim($_POST['content'])); $txt = htmlspecialchars($txt, ENT_QUOTES); $txt = mysql_real_escape_string(strip_tags($txt), $link); //过滤HTML标签,并转义特殊字符 if (strlen($txt) < 1 || strlen($txt) > 100) { echo '内容长度为1~100字符之间'; exit; } $user = stripslashes(trim($_POST['user'])); $user = htmlspecialchars($user, ENT_QUOTES); $user = mysql_real_escape_string(strip_tags($user), $link); if (strlen($user) < 2 || strlen($user) > 30) { echo '姓名长度为2~10字符之间'; exit; } $color = $_POST['color']; $time = date('Y-m-d H:i:s'); $zIndex = $_POST['zIndex'];//堆叠顺序值 $xyz = '' . $left . '|' . $top . '|' . $zIndex; $query = mysql_query("insert into notes(content,name,color,xyz,addtime)values('$txt','$user','$color','$xyz','$time')"); if ($query) { echo mysql_insert_id($link); } else { echo '出错了!'; }