★PHP访问MySql数据库 高级篇 AJAX技术

阅读本文之前，推荐先参阅《PHP访问MySql数据库 初级篇》和《PHP访问MySql数据库 中级篇 Smarty技术》。

在 前面的文章，我们已经开发了一个能够读取数据库并显示数据的程序，且程序达到了良好的界面与逻辑分离。但是这个程序并不能支持我们对数据库进行增加、删除 和修改操作。因此在这里增加这些功能。每次增加删除或修改数据时，通过AJAX方式向后台发送请求，再根据后台的返回结果调整页面显示。这种方法可以减轻 服务器的负担。

 

下面先简单的介绍下AJAX，然后给出完整的示例：

AJAX 是一种独立于 Web 服务器软件的浏览器技术。它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。通过 AJAX方式，可使用 JavaScript 的XMLHttpRequest 对象来直接与服务器进行通信。这样便可以在不重载页面的情况与 Web 服务器交换数据。同时AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX手册可以访问http://api.jquery.com/category/ajax/

 

下面是本系列中功能最为全面的程序——从test数据库的t_student表中读取数据然后显示，同时支持对t_student表进行AJAX方式的增加、删除和修改操作。在界面功能上也有表格的奇偶行变色及鼠标经过变色，使得程序更加的美观。

程序共分为8个文件，分别为smarty2.php、smarty2.html、smarty2_head.php、smarty2.js和smarty2.css及新增加的insert.php、delete.php及updata.php。

1．smarty2_head.php文件

定义数据库相关的常量，变量数组。数据库名，用户名与密码，表名等在此定义。

[php] view plaincopy
  1. <?php  
  2. // by MoreWindows( http://blog.csdn.net/MoreWindows )  
  3. define(DB_HOST, 'localhost');  
  4. define(DB_USER, 'root');  
  5. define(DB_PASS, '111111');  
  6. define(DB_DATABASENAME, 'test');  
  7. define(DB_TABLENAME, 't_student');  
  8.   
  9. $dbcolarray = array('id', 'name', 'age');  
  10. ?>  

2．smarty2.php文件

[php] view plaincopy
  1. <?php  
  2. // by MoreWindows( http://blog.csdn.net/MoreWindows )  
  3. header("Content-Type: text/html; charset=utf-8");  
  4. require('http://www.cnblogs.com/smart_libs/Smarty.class.php');  
  5. require_once('smarty2_head.php');  
  6. date_default_timezone_set("PRC");  
  7.   
  8. //mysql_connect  
  9. $conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die("connect failed" . mysql_error());  
  10. mysql_select_db(DB_DATABASENAME, $conn);  
  11.   
  12. //个数  
  13. $sql = sprintf("select count(*) from %s", DB_TABLENAME);  
  14. $result = mysql_query($sql, $conn);  
  15. if ($result)  
  16. {  
  17.     $dbcount = mysql_fetch_row($result);  
  18.     $tpl_db_count = $dbcount[0];  
  19. }  
  20. else  
  21. {  
  22.     die("query failed");  
  23. }  
  24. $tpl_db_tablename = DB_TABLENAME;  
  25. $tpl_db_coltitle = $dbcolarray;  
  26. //表中内容  
  27. $tpl_db_rows = array();  
  28. $sql = sprintf("select %s from %s", implode(",",$dbcolarray), DB_TABLENAME);  
  29. $result = mysql_query($sql, $conn);  
  30. while ($row = mysql_fetch_array($result, MYSQL_ASSOC))//等价$row=mysql_fetch_assoc($result)  
  31.     $tpl_db_rows[] = $row;  
  32.   
  33. mysql_free_result($result);  
  34. mysql_close($conn);  
  35.   
  36. $tpl = new Smarty;  
  37. $tpl->assign('db_tablename', $tpl_db_tablename);  
  38. $tpl->assign('db_count', $tpl_db_count);  
  39. $tpl->assign('db_coltitle', $tpl_db_coltitle);  
  40. $tpl->assign('db_rows', $tpl_db_rows);  
  41.   
  42. $tpl->display('smarty2.html');  
  43. ?>  

3．smarty2.html文件

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <link href="smarty2.css" rel="stylesheet" type="text/css" media="all" />  
  5. <script type="text/javascript" src="../jquery-1.7.min.js"></script>  
  6. <script type="text/javascript" src="smarty2.js"></script>  
  7. <title>{$smarty.const.DB_TABLENAME}</title>  
  8. </head>  
  9. <body>  
  10. <h1>表名：{$db_tablename}</h1>  
  11. <table id="Table" border="1" align="center" cellpadding="10" cellspacing="2" bordercolor="#ffaaoo">  
  12. <caption style="font-size:15px">当前记录数：<label id="tableRowCount">{$db_count}</label>      <input type="button" value="Add" onclick="addFun()" /> </caption>  
  13. {foreach $db_coltitle as $col}  
  14.     <th>{$col}</th>  
  15. {/foreach}  
  16. <th>操作</th>  
  17. {foreach $db_rows as $dbrow}  
  18.     <tr>  
  19.     {foreach $dbrow as $k=>$val}  
  20.         <td>{$val}</td>  
  21.     {/foreach}  
  22.     <td>  
  23.         <input type="button" value="Edit" onclick="editFun('{$dbrow['id']}', '{$dbrow['name']}', '{$dbrow['age']}');" />  
  24.         <input type="button" value="Delete" onclick="deleteFun('{$dbrow['id']}')" />  
  25.     </td>   
  26.     </tr>  
  27. {/foreach}  
  28. </table>  
  29.   
  30. <div id="editdiv" style="display:none;color:red;" align="center">  
  31.  <form>  
  32.  id:<input type=text id="editdiv_id" readonly="true" />  
  33.  name:<input type=text id="editdiv_name" />  
  34.  age:<input type=text id="editdiv_age" />  
  35.  <input type=button name="Updata" value="Updata" onclick="updataFun()" />  
  36. </form>  
  37. </div>  
  38. <div id="adddiv" style="display:none;color:green;" align="center">  
  39.  <form>  
  40.  name:<input type=text id="adddiv_name" />  
  41.  age:<input type=text id="adddiv_age" />  
  42.  <input type=button name="Insert" value="Insert" onclick="insertFun()" / >  
  43. </form>  
  44. </div>  
  45. </body>  
  46. </html>  

4．smarty2.js文件

新增加了表格的鼠标经过行变色效果

[javascript] view plaincopy
  1. //在表格的第一列中查找等于指定ID的行  
  2. function SearchIdInTable(tablerow, findid)  
  3. {  
  4.     var i;  
  5.     var tablerownum = tablerow.length;  
  6.     for (i = 1; i < tablerownum; i++)  
  7.         if ($("#Table tr:eq(" + i + ") td:eq(0)").html() == findid)  
  8.             return i;  
  9.     return -1;  
  10. }  
  11. //用CSS控制奇偶行的颜色  
  12. function SetTableRowColor()  
  13. {  
  14.     $("#Table tr:odd").css("background-color", "#e6e6fa");  
  15. $("#Table tr:even").css("background-color", "#fff0fa");  
  16. $("#Table tr:odd").hover(  
  17.     function(){$(this).css("background-color", "orange");},  
  18.     function(){$(this).css("background-color", "#e6e6fa");}       
  19. );  
  20. $("#Table tr:even").hover(  
  21.     function(){$(this).css("background-color", "orange");},  
  22.     function(){$(this).css("background-color", "#fff0fa");}       
  23. );  
  24. }  
  25. //响应edit按钮  
  26. function editFun(id, name, age)  
  27. {  
  28.     $("#editdiv").show();  
  29.     $("#adddiv").hide();  
  30.   
  31.     $("#editdiv_id").val(id);  
  32.     $("#editdiv_name").val(name);  
  33.     $("#editdiv_age").val(age);  
  34. }  
  35. //响应add按钮  
  36. function addFun()  
  37. {  
  38.     $("#editdiv").hide();  
  39.     $("#adddiv").show();      
  40. }  
  41. //记录条数增加  
  42. function IncTableRowCount()  
  43. {  
  44.     var tc = $("#tableRowCount");  
  45.     tc.html(parseInt(tc.html()) + 1);  
  46. }  
  47. //记录条数减少  
  48. function DecTableRowCount()  
  49. {  
  50.     var tc = $("#tableRowCount");  
  51.     tc.html(parseInt(tc.html()) - 1);  
  52. }  
  53. //增加一行  
  54. function addRowInTable(id, name, age)  
  55. {  
  56.     //新增加一行  
  57.     var appendstr = "<tr>";  
  58.     appendstr += "<td>" + id + "</td>";  
  59.     appendstr += "<td>" + name + "</td>";  
  60.     appendstr += "<td>" + age + "</td>";  
  61.     appendstr += "<td><input type=\"button\" value=\"Edit\" onclick=\"editFun(id, name, age);\" />";  
  62.     appendstr += "<input type=\"button\" value=\"Delete\" onclick=\"deleteFun(id)\" /></td>";  
  63.     appendstr += "</tr>";           
  64.     $("#Table").append(appendstr);  
  65.     IncTableRowCount();  
  66. }  
  67. //修改某一行  
  68. function updataRowInTable(id, newname, newage)  
  69. {  
  70.     var i = SearchIdInTable($("#Table tr"), id);  
  71.     if (i != -1)  
  72.     {  
  73.         $("#Table tr:eq(" + i + ") td:eq(1)").html(name != "" ? name : " ");  
  74.         $("#Table tr:eq(" + i + ") td:eq(2)").html(age != "" ? age : " ");  
  75.         $("#editdiv").hide();  
  76.     }  
  77. }  
  78. //删除某一行  
  79. function deleteRowInTable(id)  
  80. {  
  81.     var i = SearchIdInTable($("#Table tr"), id);  
  82.     if (i != -1)  
  83.     {     
  84.         //删除表格中该行  
  85.         $("#Table tr:eq(" + i + ")").remove();  
  86.         SetTableRowColor();  
  87.         DecTableRowCount();  
  88.     }  
  89. }  
  90. //增加删除修改数据库函数 通过AJAX与服务器通信  
  91. function insertFun()  
  92. {  
  93.     var name = $("#adddiv_name").val();  
  94.     var age = $("#adddiv_age").val();  
  95.   
  96.     if (name == "" || age == "")  
  97.     {  
  98.         alert("请输入名字和年龄!");  
  99.         return ;  
  100.     }  
  101.   
  102.     //submit to server 返回插入数据的id  
  103.     $.post("insert.php", {name:name, age:age}, function(data){  
  104.         if (data == "f")  
  105.         {  
  106.             alert("Insert date failed");  
  107.         }  
  108.         else  
  109.         {  
  110.             addRowInTable(data, name, age);  
  111.             SetTableRowColor();  
  112.             $("#adddiv").hide();  
  113.         }  
  114.     });  
  115. }  
  116. function deleteFun(id)  
  117. {  
  118.     if (confirm("确认删除?"))  
  119.     {  
  120.         //submit to server  
  121.         $.post("delete.php", {id:id}, function(data){  
  122.             if (data == "f")  
  123.             {  
  124.               alert("delete date failed");  
  125.             }  
  126.             else  
  127.             {  
  128.                 deleteRowInTable(id);  
  129.             }  
  130.         });  
  131.     }  
  132. }  
  133. function updataFun()  
  134. {  
  135.     var id = $("#editdiv_id").val();  
  136.     var name = $("#editdiv_name").val();  
  137.     var age = $("#editdiv_age").val();   
  138.   
  139.     //submit to server  
  140.     $.post("updata.php", {id:id, name:name, age:age}, function(data){  
  141.         if (data == "f")  
  142.         {  
  143.             alert("Updata date failed");  
  144.         }  
  145.         else  
  146.         {  
  147.             updataRowInTable(id, name, age);  
  148.         }  
  149.     });  
  150. }  
  151.     
  152. $(document).ready(function()  
  153. {  
  154.     SetTableRowColor();  
  155.     UpdataTableRowCount();  
  156. });    

5．smarty2.css文件

[css] view plaincopy
  1. @charset "utf-8";  
  2. h1  
  3. {  
  4.     color:Red;  
  5.     text-align:center;  
  6. }  
  7. table th  
  8. {    
  9.     background-color:#7cfc00;    
  10. }   

6．新增加的insert.php

将数据插入数据库中，成功返回新插入数据的id号，失败返回"f"。

[php] view plaincopy
  1. <?php  
  2. require_once 'smarty2_head.php';  
  3. //mysql_connect  
  4. $conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die("connect failed" . mysql_error());  
  5. mysql_select_db(DB_DATABASENAME, $conn);  
  6. //params  
  7. $name = $_POST['name'];  
  8. $age = $_POST['age'];  
  9. //insert db  
  10. $sql = sprintf("INSERT INTO %s(name, age) VALUES('%s', %d)", DB_TABLENAME, $name, $age);  
  11. $result=mysql_query($sql, $conn);  
  12. if ($result)  
  13.   echo mysql_insert_id($conn);  
  14. else  
  15.   echo "f";  
  16. mysql_close($conn);  
  17. ?>  

7．新增加的delete.php

根据id删除数据库中一行记录，成功返回"f"，失败返回"t"。

[php] view plaincopy
  1. <?php  
  2. require_once 'smarty2_head.php';  
  3. //mysql_connect  
  4. $conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die("connect failed" . mysql_error());  
  5. mysql_select_db(DB_DATABASENAME, $conn);   
  6. //params  
  7. $id       = $_POST['id'];  
  8. //delete row in db  
  9. $sql = sprintf("delete from %s where id=%d", DB_TABLENAME, $id);  
  10. $result = mysql_query($sql, $conn);  
  11. mysql_close($conn);  
  12. if ($result)  
  13.   echo "t";  
  14. else  
  15.   echo "f";  
  16. ?>  

8．新增加的updata.php

根据id修改数据库中一行记录，成功返回"f"，失败返回"t"。

[php] view plaincopy
  1. <?php  
  2. require_once 'smarty2_head.php';  
  3. //mysql_connect  
  4. $conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die("connect failed" . mysql_error());  
  5. mysql_select_db(DB_DATABASENAME, $conn);    
  6. //params  
  7. $id       = $_POST['id'];  
  8. $name = $_POST['name'];  
  9. $age = $_POST['age'];  
  10. //updata db  
  11. $sql = sprintf("update %s set name='%s',age=%d where id=%d", DB_TABLENAME, $name, $age, $id);  
  12. $result=mysql_query($sql, $conn);  
  13. mysql_close($conn);  
  14. if ($result)  
  15.   echo "t";  
  16. else  
  17.   echo "f";  
  18. ?>  

程序运行结果如下（Win7 +IE9.0）：

 

本人CSS学的太菜。所以表格的布局将就点了。


 



 

转载请标明出处，原文地址：http://blog.csdn.net/morewindows/article/details/7102362

posted @ 2012-02-03 21:39  永哥  阅读(306)  评论(0)    收藏  举报