項目開發實戰 jQuery+php+mysql實現數據上傳功能

  今天老板給我一個任務，說現在的教學管理系統中，找導入成績的時候，很多老師比如說不會批量利用excel導入，那么希望添加一個自由編輯的功能，就是對於頁面中的表格數據，當單擊的時候就可以變為可編輯狀態，平時處於不可編輯狀態，

當此處成績修改完成以后，無需點提交自動上傳，並提供可交互的UI效果。

　一拿到任務，其實在如果我沒有學習php之前我還不知道怎么做，但是學了php就知道每個層次：

從前端頁面布局==》css渲染UI組件==》后台數據庫存儲的整個過程就非常清楚了！

首先先看下實現后的效果吧：

1、這是正常狀態下的成績列表組

2、當鼠標單擊，處於可編輯狀態，並在旁邊的狀態欄進行實時的狀態提示

3、修改數據並點擊下一條數據，提供不同的狀態顯示

4、當數據存儲到數據庫的時候，會提示保存成功

5、數據庫中也插入了修改后的數據（此處沒有對上，但是肯定可以保存到navicat數據庫中）

由上面基本就是實現了所要的功能

具體代碼如下

var currentValue;
    $(".editMode table input").focus(function(){
        currentValue=$(this).val();
        //clearTimeout(middleId);
        $(this).removeAttr("readonly").addClass("editinput");
        var $that=$(this).parent().next().find("img");
        $that.next().html("正在編輯").attr("class","c_color_2");
        $that.hide();
    });
    $(".editMode table input").blur(function(){        
        //clearTimeout(timeId);        
        var $that=$(this).parent().next().find("img");
        $(this).attr("readonly","readonly").removeClass("editinput");
        if($(this).val()==currentValue){    
            $that.next().html("無");
            return false;
        }        
        $that.attr("src","images/loaded.gif").show();
        $that.next().html("正在保存").attr("class","c_color_3");
        //開始
        var number=$(this).val();
        var url="lyl.php?value="+number;
        //url+="&sid="+Math.random();
        $.get(url,function(data){
            $that.stop().attr("src","images/success.png").show();
            $that.next().html("保存成功").attr("class","c_color_1");
        });
        
    })

其中要注意幾個問題：1、當數據未發生變動的時候，停止向服務器發送重復的請求！

2、sid="+Math.random()是為了避免瀏覽器緩存問題

3、當來回平凡切換的時候，動畫的隊列問題

數據庫方面語句相對簡單，就不貼了，就是連接數據庫，選擇數據庫表，利用insert插入語句將對應的內容存儲在數據庫中。