实现类似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);
}
?>

赞 (0)

相关推荐

  • ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

    在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题. 总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略: Internet选项--浏览历史记录--设置-- Int

  • ajax上传时参数提交不更新等相关问题

    先前,我从网上下载了一个jQuery的Ajax上传插件,网页的左侧是上传分类,想要实现的一个功能是如此这样的:我本来是打算在服务端根据上传分类建立不同的文件夹来保存文件的,因此这个就需要传一个上传分类参数给后台.这些上传分类是从数据库读出,用repeater生成的.当点击其中一个分类时就给他设置一个样式,并且将这个分类的名字保存到一个变量uploadCatlog中.我可以取到分类并传给后台,但是很奇怪的是只有第一次是正确的,以后的每次参数都不更新.其实在上传插件的onComplete回调函数中也

  • Ajax异步无刷新对局部数据更新

    复制代码 代码如下: <asp:ScriptManager ID="smScriptManager" runat="server"></asp:ScriptManager> 复制代码 代码如下: <asp:UpdatePanel ID="upLinkmanList" UpdateMode="Conditional" runat="server"><ContentTe

  • ajax更新数据后，jquery、jq失效问题

    给元素绑定click事件 ,但是遇到一个问题 就是 当我执行一些ajax请求后 这个click事件就失效了 比如说 我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了click事件了 其实 原因很简单 ajax加载内容是在$(document).ready()之后的操作,这个时候给绑定函数的时候,找到的元素集合中还不包括ajax加载的内容,所以原来的没有问题,后加载的就没有绑定 解决方法 有两个 : 1. 在ajax请求成功之后重新绑定 2. 用live方法 复制代码 代码如下:

  • ajax异步刷新实现更新数据库

    ajax异步刷新实现更新数据库

    上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中. 当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库. 首先,我们需要声明XMLHttpRequest对象 复制代码 代码如下: //声明XMLHttpRequest对象 var xmlHttp; function createXMLHTTP() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 } else if

  • Jquery工作常用实例 使用AJAX使网页进行异步更新

    AJAX = Asynchronous JavaScript and XML.,是一种创建快速动态网页的技术. AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新.这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新. 通过 jQuery AJAX,你可以直接把远程数据载入网页被选HTML元素中. Jquery Ajax常用的函数有三种,分别是: $.post(url,data,callback,type):使用 HTTP POST 来加载远程数据: $.get(ur

  • Ajax方式实现定期更新页面某块内容的方法

    本文实例讲述了Ajax方式实现定期更新页面某块内容的方法.分享给大家供大家参考.具体实现方法如下: function updateShouts(){ // Assuming we have #shoutbox $('#shoutbox').load('latestShouts.php'); } setInterval( "updateShouts()", 10000 ); 希望本文所述对大家的Ajax程序设计有所帮助.

  • Ajax局部更新导致JS事件重复触发问题的解决方法

    如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理. 以带有公共工具栏的列表界面为例: | Menu1 | Menu2 ---------------------------------------------------------------------------- ID TITLE DESCRIPTION OPERATION 1 test1 hey test X - ... 2 test2 why not X - ... --------------------

  • 实现类似facebook无刷新ajax更新

    实现类似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();

  • AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件，支持多样式多数据绑定

    AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件，支持多样式多数据绑定

    本控件可以对GridView,Repeater,DataGrid,DataList...几乎所有的.net数据绑定控件进行分页,全部无刷新,数据绑定部分可以使用存储过程也可以直接使用sql语句,这对本控件没有任何干扰!本控件具有较好的用户界面,能够根据需要变换各种样式,配合css控制效果则更好! 1.分页样式效果图: 2.如何使用: 于bin目录下添加:AspNetAjaxPager.dll引用 aspx文件内容: 复制代码 代码如下: <%@ Page Language="C#"

  • jquery插件pagination实现无刷新ajax分页

    1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代码 /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version

  • Ajax技术(WEB无刷新提交数据)-

    Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二.引用 Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是Asynchronous JavaScript and XML的缩写. Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发

  • 使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    Pjax是啥? Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr?) BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副作用(页面不会跳转刷新) PJAX效果 通过url可以跟踪ajax的动态加载内容.这种

  • jsp+ajax实现无刷新上传文件的方法

    jsp+ajax实现无刷新上传文件的方法

    本文实例讲述了jsp+ajax实现无刷新上传文件的方法.分享给大家供大家参考,具体如下: 列表页:selectaddress.jsp js页:ajax_edit.js jsp处理页:editaddress.jsp 上传工具类:UploadUtil.java 思想:由于安全问题,javascript操纵不了文件, 导致ajax不能动态上传文件,所以选择了iframe, 列表页把form表单提交到一个隐式的iframe里面,设置表单的属性 复制代码 代码如下: enctype='multipart/

  • 基于ajax实现无刷新分页的方法

    本文实例讲述了基于ajax实现无刷新分页的方法.分享给大家供大家参考.具体如下: 在普通的分页中,一旦页码改变,则url改变,整个页面都会刷新,如果我们希望页码的改变不影响整个网页的变动,可以使用ajax技术. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 通过客户端html代码,用ajax把服务器中的数据通过get方式传递过来,显示在html中. <!doct

  • jquery+ajax+C#实现无刷新操作数据库数据的简单实例

    我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容 我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页 页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"><img src="images/Wait.gif&quo

  • Asp.net利用JQuery AJAX实现无刷新评论思路与代码

    Asp.net利用JQuery AJAX实现无刷新评论思路与代码

    首先在数据库中就建三个字段的表用来存储用户名和评论信息,Id只是为了设置唯一标示,所以设置成整型自增字段就行了. 再建一个HTML页面,只需简单的拉几个html控件出来摆着就行,注意在页面顶部有个<table>标签用来占位输出评论内容. Html页面代码就这样简单就行了: 复制代码 代码如下: <body><table id="room"> </table> <div> 用户名:<input id="Text1

随机推荐