项目开发实战 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插入语句将对应的内容存储在数据库中。