異步搜索過濾內容數據（關鍵字搜索）
表單異步驗證(表單提交驗證)
異步加載內容數據(更多內容)
數據邏輯處理
AJAX特點在不刷新當前頁面的前提下，與服務器進行異步交互
優化了瀏覽器和服務器之間的數據傳輸、減少了不必要的數據往返
把部分數據轉移到客戶端，減少了服務器的壓力
實現AJAX的基本思路根據需求選擇一個javascript類庫
javascript部分向服務器傳遞數據
php接受傳遞的數據，處理數據，返回給javascript
javascript接受php的數據，并做相應處理
基礎知識前端方面:html css javascript jquery json
服務器方面:php apache(nginx)
數據庫方面:mysql sql
學習目標學習php和javascript之間異步交互
理解ajax代碼的運行結構和基本原理
清晰布局javascript代碼
效果圖創建基本的數據表
完成顯示功能
完成刪除數據功能
完成添加數據功能
完成修改數據功能
表SQLcreate table et_data( id int primary key auto_increment, c_a varchar(30), c_b varchar(30), c_c varchar(30), c_d varchar(30), c_e varchar(30), c_f varchar(30), c_g varchar(30), c_h varchar(30));顯示數據過程
顯示出來一個基本的html
$.get===== data.php
data.php獲取db數據== js
js= 生成行，扔給基本html
添加數據之前端結構搭建UI添加按鈕，8個文本框 操作列
取消功能
確認添加按鈕，收集UI數據— data.php
data.php — js
列表正常顯示，刷新后記錄仍然存在
編輯功能給編輯按鈕添加事件 ，替換UI 刪除按鈕– 保存按鈕 編輯按鈕—- 取消按鈕
取消編輯事件
保存編輯的事件,手機數據- data.php
data.php- js
js 行編輯狀態= 正常狀態
源碼展示與分析1、樣式：main.css
body{background-color:#899BA5;}.container {width:960px;margin:80px auto;}td {font-size:20px;width:120px;height:40px;text-align:center;color:black;cursor:pointer;background-color:white;}td:hover{background-color:#aaaacc;}input.txtField{width:90px;height:30px;}.optLink{text-decoration:none; color:#f46948;}.optLink:hover{color:#cc0033;}2、基礎模板：index.html
!doctype html html head meta charset= utf-8 title 可編輯表格DEMO /title link rel= stylesheet href= css/main.css /head body p >3、JS代碼:app.js
$(function(){ var g_table = $( table.data //定義全局變變量，定位到html的表格 var init_data_url = data.php?action=init_data_list $.get(init_data_url,function(data){ var row_items = $.parseJSON(data);//json數據轉換成json數組對象 //js循環遍歷 for(var i = 0 , j = row_items.length ; i i++){ var data_dom = create_row(row_items[i]); g_table.append(data_dom); }); //循環生成行記錄 function create_row(data_item){ var row_obj = $( tr /tr for(var k in data_item){ if( id != k){//去除返回字段中的id var col_td = $( td /td col_td.html(data_item[k]);//給col_td寫入內容 row_obj.append(col_td);//追加DOM } //自定義按鈕 var delButton = $( a >4、PHP代碼:data.php
?php$action = $_GET[ action switch($action){ case init_data_list : init_data_list(); break; case add_row : add_row(); break; case del_row : del_row(); break; case edit_row : edit_row(); break;}//初始化數據function init_data_list(){ $sql = SELECT * FROM `et_data` //下面函數的參數 $query = query_sql($sql);//自定義函數未定義形參 while ($row = $query- fetch_assoc()) { $data[] = $row; } echo json_encode($data);exit();}//新增行記錄function add_row(){ $sql = INSERT INTO `et_data` ( `c_a`,`c_b`,`c_c`,`c_d`,`c_e`,`c_f`,`c_g`,`c_h` ) VALUES ( for($i = 0;$i $i++){ $sql .= / . $_POST[ col_ . $i] . / , } $sql = trim($sql, , $sql .= ) $lastInsertId = SELECT LAST_INSERT_ID() AS LD if($res = query_sql($sql,$lastInsertId)){ $d = $res- fetch_assoc(); echo $d[ LD exit(); }else{ echo db error... exit();}//刪除行記錄function del_row(){ $dataid = $_POST[ dataid $sql = DELETE FROM `et_data` where `id` = . $dataid; if(query_sql($sql)){ echo ok exit(); }else{ echo db error... exit();}//編輯行記錄function edit_row(){ $sql = UPDATE `et_data` SET $id = $_POST[ id unset($_POST[ id for($i=0;$i $i++){ $sql .= `c_ .chr(97 + $i) . ` = / .$_POST[ col_ . $i] . / , $sql = trim($sql, , $sql .= WHERE `id` = . $id; if(query_sql($sql)){ echo ok exit(); }else{ echo db error... exit();}//數據庫查詢function query_sql(){ $mysqli = new mysqli( 127.0.0.1 , root , root , etable $sqls = func_get_args();//獲取函數的所有參數 foreach ($sqls as $key = $value) { $query = $mysqli- query($value); $mysqli- close(); return $query;}源碼鏈接：http://pan.baidu.com/s/1fAinVXU-nWt7ODgrWoNRIg 密碼：n5yr
相關推薦：
PHP實現會員賬號只能唯一登錄的代碼實例
phpExcel在導出文件時內存溢出的解決方法
以上就是php和ajax怎么實現表格的實時編輯（附代碼）的詳細內容，PHP教程
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
