实现类似facebook无刷新ajax更新

 更新时间:2014年03月17日 15:04:53   作者:  
这篇文章主要介绍了实现类似facebook无刷新ajax更新,需要的朋友可以参考下

复制代码 代码如下:

<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

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

相关文章

  • Jquery Ajax请求方法小结(值得收藏)

    Jquery Ajax请求方法小结(值得收藏)

    本文给大家介绍jquery ajax请求方法小结,jquery作为一个轻量级的js框架,能快速的开发js应用,并且在一定程度上改变了我们写js代码的习惯,对jquery ajax请求感兴趣的朋友参考下
    2015-11-11
  • AJAX请求队列实现

    AJAX请求队列实现

    这篇文章主要为大家详细介绍了AJAX请求队列的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JQuery中Ajax的Post提交在IE下中文乱码的解决方法

    JQuery中Ajax的Post提交在IE下中文乱码的解决方法

    在JQuery的Ajax POST请求中,进行请求,其中的中文在后台,显示为乱码,在FF/Chrome中,可以正常传递中文,但是在IE下,则存在问题
    2014-05-05
  • react axios 跨域访问一个或多个域名问题

    react axios 跨域访问一个或多个域名问题

    这篇文章主要介绍了react axios 跨域访问一个或多个域名问题,本文通过实例代码截图的形式给大家展示的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • ajax实现上传图片保存到后台并读取的实例

    ajax实现上传图片保存到后台并读取的实例

    下面小编就为大家分享一篇ajax实现上传图片保存到后台并读取的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • AJAX跨域请求获取JSON数据的实现方法

    AJAX跨域请求获取JSON数据的实现方法

    我们都知道,由于受到浏览器的限制,AJAX 是不允许跨域请求,不过可以通过使用 JSONP 来实现,本文介绍了 JSONP 的是怎么在 jQuery,MooTools 的,Dojo Toolkit 中实现的,感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • 原生ajax调用数据实例讲解

    原生ajax调用数据实例讲解

    这篇文章主要向大家介绍了原生ajax调用数据实例,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-01-01
  • 滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

    滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

    滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用特在此与大家一起分享,感兴趣的朋友可以参考下哈
    2013-05-05
  • js ajax加载时的进度条代码

    js ajax加载时的进度条代码

    在web页面中使用ajax加载进度条,可以让用户预先判断等待的时间,而且还可以减少用户等待信息加载过程中的心理焦虑感,所以进度条加载必不可少,下面小编给大家介绍ajax加载进度条代码是如何实现的
    2015-10-10
  • ajax无刷新分页的简单实现

    ajax无刷新分页的简单实现

    这篇文章主要为大家详细介绍了ajax无刷新分页的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论