相仿facebook无刷新ajax更新 _Ajax

类似facebook无刷新ajax更新

演示

XML/HTML Code
<script?type="text/javascript">??
$(document).ready(function()??
{??
??
$('.edit_link').click(function()??
{??
$('.text_wrapper').hide();??
var?data=$('.text_wrapper').html();??
$('.edit').show();??
$('.editbox').html(data);??
$('.editbox').focus();??
});??
??
$(".editbox").mouseup(function()???
{??
return?false??
});??
??
$(".editbox").change(function()???
{??
$('.edit').hide();??
var?boxval?=?$(".editbox").val();??
var?dataString?=?'data='+?boxval;??
$.ajax({??
type:?"POST",??
url:?"update_profile_ajax.php",??
data:?dataString,??
cache:?false,??
success:?function(html)??
{??
$('.text_wrapper').html(boxval);??
$('.text_wrapper').show();??
??
}??
});??
??
});??
???
$(document).mouseup(function()??
{??
$('.edit').hide();??
$('.text_wrapper').show();??
});??
??
});??
</script>??
<style?type="text/css">??
body??
{??
font-family:Arial,?Helvetica,?sans-serif;??
??
font-size:12px;??
}??
.mainbox??
{??
width:250px;??
margin:50px;??
}??
.text_wrapper??
{??
border:solid?1px?#0099CC;??
padding:5px;??
width:187px;??
??
??
??
}??
.edit_link??
{??
float:right??
}??
.editbox??
{??
overflow:?hidden;?height:?61px;border:solid?1px?#0099CC;?width:190px;?font-size:12px;font-family:Arial,?Helvetica,?sans-serif;?padding:5px??
}??
</style>??
<div?class="mainbox">??
<a?href="#"?class="edit_link"?title="Edit">Edit</a>??
<?php??
include("db.php");??
$sql=mysql_query("select?email?from?users?where?user_id='1'");??
$row=mysql_fetch_array($sql);??
$profile=$row['email'];??
?>??
<div?class="text_wrapper"?style=""><?php?echo?$profile;??></div>??
??
??
<div?class="edit"?style="display:none"><textarea?class="editbox"?cols="23"?rows="3"???name="profile_box"></textarea></div>??
??
</div>??

?update_profile_ajax.php

PHP Code
<?php??
??
if($_POST['data'])??
{??
$data=$_POST['data'];??
$data?=?mysql_escape_String($data);??
$sql?=?"update?users?set?email='$data'?where?user_id='1'";??
mysql_query(?$sql);??
}??
?>??

原文地址:http://www.freejs.net/article_biaodan_136.html