php+Ajax 例子

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(){
    $data = array();
    $query = query_sql('select * from `et_data` order by `id` asc');
    while($row = $query->fetch_assoc()){
        $data[] = $row;
    }
    echo json_encode($data);
}
//删除
function del_row(){
    $dataid = $_POST['dataid'];
    $sql = "DELETE FROM `et_data` WHERE `id` = " . $dataid;
    if(query_sql($sql)){
        echo "ok";
    } else {
        echo "db error ...";
    }
}
//添加
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=; $i<; $i++){
        $sql .= '\'' . $_POST['col_' .$i] . '\', ';
    }
    $sql = trim($sql,", ");
    $sql .= ")";
    if($res = query_sql($sql,"SELECT LAST_INSERT_ID() as LD")){
        $d = $res->fetch_assoc();
        echo $d['LD'];
    } else {
        echo "db error ...";
    }
}
//修改
function edit_row(){
    $sql = 'UPDATE `et_data` SET ';
    $id = $_POST['id'];
    unset($_POST['id']);
    for($i =  ; $i <  ; $i++){
        $sql .= ' `c_' . chr(+$i) . '` = \'' . $_POST['col_' . $i] . '\' , ';
    }
    $sql = trim($sql,", ");
    $sql .= ' WHERE `id` = ' . $id ;

    if(query_sql($sql)){
        echo "ok";
    } else {
        echo "db error ...";
    }
}
// 初始化数据库
function query_sql(){
    $mysqli = new mysqli("127.0.0.1", "root", "root", "etable");
    $sqls = func_get_args();
    foreach($sqls as $s){
        $query = $mysqli->query($s);
    }
    $mysqli->close();
    return $query;
}

JS

$(function(){

    var g_table = $('table.data');
    var init_data_url = "data.php?action=init_data_list";

    $.get(init_data_url, function(data){
        var row_items = $.parseJSON(data);
        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 delHandler(){
        if (confirm('确定要删除吗？')) {
            var data_id = $(this).attr("dataid");
            var meButton = $(this);
            $.post("data.php?action=del_row",{dataid:data_id},function(res){
                    if("ok" == res)    {
                        $(meButton).parent().parent().remove();
                    } else {
                        alert("删除失败...");
                    }
            });
        }
    }

    //修改事件
    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 class='textField' type='text' /></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 class="opLink" href="javascript:">确认&nbsp;</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("ok" == res){
                    var newUpdateRow = create_row(post_fields);
                    currentRow.replaceWith(newUpdateRow);
                } else {
                    alert("数据更新失败...");
                }
            });
        });

        var canceButton = $('<a class="opLink" href="javascript:">&nbsp;取消</a>');
        canceButton.click(function(){
            var currentRow = $(this).parent().parent();
            meRow.find('a:eq(0)').click(delHandler);
            meRow.find('a:eq(1)').click(editHandler);
            currentRow.replaceWith(meRow);//需重新绑定事件
        })

        opt_td.append(saveButton);
        opt_td.append(canceButton);

        editRow.append(opt_td);
        meRow.replaceWith(editRow);
    }

    //列表
    function create_row(data_item){
        var row_obj = $("<tr></tr>");
        for(var k in data_item){
            if ("id" != k) {
                var col_td = $("<td></td>");
                col_td.html(data_item[k]);
                row_obj.append(col_td);
            }
        }

        var delButton = $('<a class="opLink" href="javascript:">删除&nbsp;</a>');
        delButton.attr("dataid", data_item['id']);
        delButton.click(delHandler);

        var editButton = $('<a class="opLink" href="javascript:">编辑&nbsp;</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;
    }

    // 添加
    $("#addBtn").click(function(){
        var addRow = $("<tr></tr>");

        for (var i = 0; i < 8; i++) {
            var col_td = $("<td><input type='text' class='textField' /></td>")
            addRow.append(col_td);
        }

        var col_opt = $("<td/></td>");

        var confirmBtn = $('<a class="opLink" href="javascript:">确认&nbsp;</a>');
        confirmBtn.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("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("插入失败...");
                }
            })
        });

        var cancelBtn = $('<a class="opLink" href="javascript:">&nbsp;取消</a>');
        cancelBtn.click(function(){
            $(this).parent().parent().remove();
        });

        col_opt.append(confirmBtn);
        col_opt.append(cancelBtn);

        addRow.append(col_opt);
        g_table.append(addRow);
    });

});

数据库

grant all privileges on  etable.* to 'shaddow'@'localhost' identified by '';
DROP DATABASE IF EXISTS aetable;
create database aetable;
use aetable;
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)
);

LOCK TABLES `et_data` WRITE;
/*!40000 ALTER TABLE `et_data` DISABLE KEYS */;
INSERT INTO `et_data` VALUES (12,'my','heart','will','go','on','and','on','forever'),(13,'hello','world','are','you','ok','with','your','skill'),(14,'when','i','was','young','i','listen','to','the radio'),(15,'wait','for','my','faveriate','song','you','like','it'),(17,'你','好','吗？','你','真的','好','嘛','确定？'),(18,'我','很','好','啊','谢谢','你','吧','非常'),(19,'故事','发生','在','','年','那时候','我们','都不大'),(20,'php','javascript','c','c++','python','golang','c#','java');
UNLOCK TABLES;