精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站开发>ajax教程>正文

在 AJAX 开发中集成数据库技术


来源: 时间:06-11-28 点击: 点击这里收藏本文

+ "<div class='title' id='title_"+ i +"'>"+ _title +"</div>"
+ "<div class='description' id='description_"+ i +"'>"+ _description +"</div>"
+ "<div class='date' id='date_"+ i +"'>"+ _date +"</div>"
+ "<a href=\"javascript­:toggle('"+ i +"');\">edit this post</a><br/>"
+ "</div>"
+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +">"
+ "<div class='title'><input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'></div>"
+ "<div class='description'><textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' rows='15'>"+ _description +"</textarea></div>"
+ "<div class='date'>"+ _date +"</div>"
+ "<input type='button' name='cancel' value='cancel' o­nclick=\"javascript­:toggle('"+ i +"');\">"
+ "<input type='button' name='delete' value='delete this post' o­nclick=\"javascript­:deletePost("+ _id +");\">"
+ "<input type='button' name='submit' value='save this post' o­nclick=\"javascript­:saveNewPost("+ _id +","+ i +");\">"
+ "</div>"
+ "<p>"nbsp;</p>";

  每个职务的文本版本简单地显示标题,描述和日期以及一个"edit this post"链接。每个职务的表单版本有三个按钮:

  ·"cancel"按钮-简单地把职务的状态切换回文本版本。

  ·"delete this post"按钮-把当前职务的ID发送给PHP对象以从数据库中把它删除。

  ·"save this post"按钮-允许用户把新的或编辑过的职务保存到服务器

  处理服务器端请求通讯的核心方法有onResponse,saveNewPost,deletePost和getPost方法;还有存储当前正操作的职务索引的一个getter和一个setter方法。这些getter/setter方法把当前索引值提供给这些核心方法,这样正确的职务就可以用基于该索引的正确信息进行更新。下面是针对每个核心方法(不包括onResponse,因为我们以前观察过它的功能)的简短描述和代码示例:

  · 下面的saveNewPost方法通过收集并把表单输入值发送给PHP对象来保存新的职务并且把getPost方法设置为onreadystatechange的回叫方法:

function saveNewPost(_id, _index){
 var newDescription = document.getElementById("formDescription_"+ _index).value;
 var newTitle = document.getElementById("formTitle_"+ _index).value;
 setIndex(_index);
 sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost);
}

  · 下面的getPost方法是一个回调方法-它负责当从PHP对象收到响应时更新单独的职务:

function getPost(){
 if(checkReadyState(request)) {
  var response = request.responseXML.documentElement;
  var _title = response.getElementsByTagName('title')[getIndex()].firstChild.data;
  var _description = response.getElementsByTagName('description')[getIndex()].firstChild.data;
  var _date = response.getElementsByTagName('date')[getIndex()].firstChild.data;

  document.getElementById("title_"+ getIndex()).innerHTML = _title;
  document.getElementById("description_"+ getIndex()).innerHTML = _description;
  document.getElementById("date_"+ getIndex()).innerHTML = _date;
  toggle(getIndex());
 }
}

  · 下面的deletePost方法把当前索引作为一个请求发送给PHP对象,这最终将删除数据库中的记录并以更新的职务进行响应:

9 7 3 1 2 3 4 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.