非同步搜尋過濾內容資料（關鍵字搜尋）
表單非同步驗證(表單提交驗證)
非同步載入內容資料(更多內容)
資料邏輯處理
在不重新整理當前頁面的前提下，與伺服器進行非同步互動
最佳化了瀏覽器和伺服器之間的資料轉送、減少了不必要的資料往返
把部分資料轉移到用戶端，減少了伺服器的壓力
根據需求選擇一個javascript類庫
javascript部分向伺服器傳遞資料
php接受傳遞的資料，處理資料，返回給javascript
javascript接受php的資料，並做相應處理
前端方面:html css javascript jquery json
伺服器方面:php apache(nginx)
資料庫方面:mysql sql
學習php和javascript之間非同步互動
理解ajax代碼的運行結構和基本原理
清晰布局javascript代碼
建立基本的資料表
完成顯示功能
完成刪除資料功能
完成添加資料功能
完成修改資料功能
create 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 class="container"> <table class="data"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td style="width:240px;"> <a id="addBtn" class="optLink" href="javascript:;"/>添加</a> </td> </tr> </table> </p> <script type="text/javascript" src="js/jquery.js"> </script> <script type="text/javascript" src="js/app.js"> </script> </body></html>
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 < j ; 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 class="optLink" href="javascript:;">刪除 </a>');//刪除按鈕 delButton.attr("dataid",data_item['id']);//給按鈕添加dataid屬性 delButton.click(delHandler);//給按鈕添加點擊事件 var editButton = $('<a class="optLink" href="javascript:;">編輯</a>');//編輯按鈕 editButton.attr("dataid",data_item['id']); editButton.click(editHandler); //追加操作列 var opt_td = $('<td></td>'); opt_td.append(delButton); opt_td.append(editButton); row_obj.append(opt_td); return row_obj; } //操作列的刪除事件 function delHandler(){ var data_id = $(this).attr("dataid");//擷取刪除的dataid的值，$(this)指點擊的這個button var meButton = $(this);//按鈕這個變數 $.post("data.php?action=del_row",{dataid:data_id},function(res){ if(res == "ok"){ $(meButton).parent().parent().remove();//刪除行記錄 }else{ alert(res); } }); } //添加行記錄 $("#addBtn").click(function(){ var addRow = $("<tr></tr>"); //八個文字框 for(var i=0;i<8;i++){ var col_td = $("<td><input type='text' class='txtField'/></td>"); addRow.append(col_td); } //操作列 var col_opt = $("<td></td>"); var confirmBtn = $("<a href='javascript:;' class='optLink'>確認 </a>"); confirmBtn.click(function(){//確認操作 var currentRow = $(this).parent().parent();//tr var input_fields = currentRow.find("input"); var post_fields = {};//發送資料對象 for(var i=0,j=input_fields.length;i<j;i++){ post_fields['col_' + i] = input_fields[i].value; } $.post("data.php?action=add_row",post_fields,function(res){ if(0 < res){ post_fields['id'] = res; var postAddRow = create_row(post_fields); currentRow.replaceWith(postAddRow); }else{ alert(res); } }); }); var cancelBtn = $("<a href='javascript:;' class='optLink'>取消</a>"); cancelBtn.click(function(){//刪除操作，取消直接刪除行 $(this).parent().parent().remove(); }); col_opt.append(confirmBtn); col_opt.append(cancelBtn); addRow.append(col_opt); g_table.append(addRow); }); //編輯行記錄 function editHandler(){ var data_id = $(this).attr("dataid"); var meButton = $(this); var meRow = $(this).parent().parent();//沒有事件 var editRow = $("<tr></tr>"); for(var i=0;i<8;i++){ var editTd = $("<td><input type='text' class='txtField'/></td>"); var v = meRow.find('td:eq(' + i +')').html(); editTd.find('input').val(v); editRow.append(editTd); } //操作列 var opt_td = $("<td></td>"); var saveButton = $("<a href='javascript:;' class='optLink'>儲存 </a>"); saveButton.click(function(){ var currentRow = $(this).parent().parent(); var input_fields = currentRow.find("input"); var post_fields = {}; for(var i=0,j=input_fields.length;i<j;i++){ post_fields['col_' + i] = input_fields[i].value; } post_fields['id'] = data_id; $.post("data.php?action=edit_row",post_fields,function(res){ if(res == 'ok'){ var newUpdateRow = create_row(post_fields); currentRow.replaceWith(newUpdateRow); }else{ alert(res); } }); }); var cancleButton = $("<a href='javascript:;' class='optLink'>取消</a>") cancleButton.click(function(){ var currentRow = $(this).parent().parent();//當前行 meRow.find('a:eq(0)').click(delHandler);//新替換的行沒有點擊事件，需要重新賦予點擊事件 meRow.find('a:eq(1)').click(editHandler); currentRow.replaceWith(meRow);//meRow為以前的行 }); opt_td.append(saveButton); opt_td.append(cancleButton); editRow.append(opt_td); meRow.replaceWith(editRow); } //列印輸出調試 function debug(res){ console.log(res); }});
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<8;$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<8;$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;}
源碼連結：https://pan.baidu.com/s/1fAinVXU-nWt7ODgrWoNRIg 密碼：n5yr
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
