使用ajax与jQuery实现局部修改信息

实现效果：原本是span框双击后变为input框变成可输入状态，当鼠标移开失去焦点后，

    input框重新变为span框，并且已实现后台的数据库的数据修改；

   当input框输入为空时，鼠标移开失去焦点后，则变回原来默认的值，

   并且后台数据库的数据并不会修改。

具体代码实现：

<script src="js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		//.s是span框的class值
		$(".s").dblclick(function() {
			var td = $(this);
			var txt = td.text();
			var input = $("<input type='text' value='"+txt+"'/>");
			td.html(input);
			input.click(function() {
				return false;
			})
			//获取焦点
			input.trigger("focus");
			//文本框失去焦点后提交内容，重新变为文本 
			input.blur(function() {
				var newtxt = $(this).val();
				if (newtxt != "") {
					td.html(newtxt);
					//获取好友的ID
					var id = $(".s").attr("id");
					//获取修改后的名字
					var s = document.getElementById(id);
					var name = s.innerHTML;
					$.ajax({
						type : "POST",
						url : "UpdateSer",
						data : "id=" + id + "&name=" + name
					})
				} else {
					$(this).html(txt);
					td.html(txt);
				}
			})
		});

效果截图：

修改前页面截图与数据库截图：

修改时页面截图：

修改刷新页面后的页面截图与数据库截图：