在本篇文章中,主要是介紹資料的修改
如何利用jQuery的AJAX相關操作達成目標

 

對於沒有jQuery基礎的人,閱讀本篇文章提到的程式碼可能稍嫌吃力,
在這邊你可以直接了解結果,將心力著重於CodeIgniter的函數部份就好,

AJAX無腦更新系統目標:

1.雙擊欄位,進入更新模式,目標欄位更動為輸入框 
2.輸入完畢之後,(游標離開輸入框的時候),我們利用post函數更新資料庫

有了目標之後我們就可以開始實做了

1.先將所有的目標欄位加入兩個class buttom 跟資料庫欄位名稱
統一的buttom作為jQuery的觸發條件,
資料庫欄位名稱則是在更新欄位的時候,讓伺服器端知道該更新哪個欄位

2.table中設定好id="XXX" 其中XXX是由資料庫裡面的動畫id來決定
(這部份在上一篇教學裡面就順手打上去了)

3.實做jQuery :"點兩下 生出新欄位 失去焦點後回傳server"

 $(".buttom").dblclick(function()
{
var ori=$(this);
//alert($(this).closest("table").attr("id"));
var key=$(this).closest("table").attr("id");
$(this).html("<input id=\"input_3\" value=\""+$(this).html()+"\">");
$("#input_3").focus();
$("#input_3").blur(function()
{
var tmp=ori.attr("class");
var tmp2=tmp.split(" ");
//alert(tmp2[0]+" "+tmp2[1]);
if($("#input_3").val()=="")$("#input_3").val("____");
$.post
(
"/index.php/PG/update/" ,
{key:key,field:tmp2[1],new_value:$("#input_3").val()} ,
function(data)
{
ori.html($("#input_3").val());
//alert(data);
}
);
});
return false;
});

 

解釋幾個可能會看不太懂的地方


var tmp=ori.attr("class");
var tmp2=tmp.split(" ");
//alert(tmp2[0]+" "+tmp2[1]);
這部份是取得第二個class,
還記得前面說的嗎? 第一個class固定是buttiom 第二個是資料庫欄位


if($("#input_3").val()=="")$("#input_3").val("____");
因為我們採用點兩下文字觸發,這段是避免沒有文字,所以無法觸發的囧境..


$.post
(
"/index.php/PG/update/" ,
{key:key,field:tmp2[1],new_value:$("#input_3").val()} ,
function(data)
{
ori.html($("#input_3").val());
//alert(data);
}
);
jQuery的post函數 伺服器端PG/update/ 會接收到
欄位key == 變數key 欄位field == 變數tmp2[1]
欄位new_value==$("#input_3").val()的查詢
基本上就是把用法記下來就對了-.-+

4.實做伺服器端的update函數


在PG.php裡面新增函數

function update()
{
//func_num_args()
$this->load->database();
$final_data[ $_POST['field'] ] = $_POST['new_value'];
$this->db->where('id',$_POST['key']);
$this->db->update('anime',$final_data);
echo $_POST['key']." ".$_POST['field']." ".$_POST['new_value'];

}

這個...細節部份去翻CodeIgniter的使用手冊吧,
我承認我是複製貼上以前的Code (被毆)
當然在這邊你要自己寫update的MYSQL語法也是OK的,
我只是為了測試一下CodeIgniter的寫法有沒有比較簡潔,才改用CI的寫法

5.實做Controller載入view部份

這步驟就是要把我們前面做的部份整合起來,
利用controller呼叫函數來完成網頁的顯示,

回想一下我們現在做了哪些東西,
我們有

1.一個資料庫
2.一個controller PG.php 裡面有一些基礎函數
3.一個view anime_list.php接收$query變數的資料並顯示
4. anime_list.php 還呼叫PG下的update以便更新資料

為了測試方便起見,請先在資料庫裡面隨便新增幾筆資料,
這樣子測試的時候才有結果顯示,
新增完之後,我們開始撰寫test函數,
功能是準備清單資料,並且呼叫 anime_list.php

function test()
{
$this->load->database();
$sql="SELECT * FROM anime";
$data['query']=$this->db->query($sql);
$this->load->view('anime_list',$data);
}

夠簡單吧,組合起來就是這麼的無腦!

先載入資料庫,然後設定語法"SELECT * FROM anime"
代表我們要查詢anime裡面所有的資料
$this->db->query($sql);這行產生查詢結果

請注意,在這邊,我們把查詢結果丟給$data['query']這個陣列,
這就是CodeIgniter 裡面 controller跟view傳輸資料的方法!

$data[]裡面的所有索引,都會直接變成view裡面的全域變數,
例如說 ,我在這裡指定了$data['query'],
並且利用以下的語法讀取view:
$this->load->view('anime_list',$data);
這樣子 在anime_list.php中,就可以直接使用$query這個變數

同理可推$data['A'] $data['B'] $data['C']
傳到anime_list之後 會是$A $B $C
道理是一樣的

存檔,執行,
至此,一個由CodeIgniter開發的簡單網站架構就此完成,

不過為了讓網站的運作更為完善,
我們還需要增加"添加動畫"與"移除動畫"的功能,
這點我會在下一篇的教學加以講解

smartPG 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 信憲 吳
  • 請問您所謂的

    1.先將所有的目標欄位加入兩個class buttom 跟資料庫欄位名稱

    是怎麼實作呢?

    感謝你