PHP+AJAX 實現表格實時編輯

本文轉載自查看原文 2018-12-06 17:23 957 php/ ajax

https://blog.csdn.net/qq_29627497/article/details/81365107

源碼鏈接：https://pan.baidu.com/s/1fAinVXU-nWt7ODgrWoNRIg 密碼：n5yr

AJAX用用場景

    異步搜索過濾內容數據（關鍵字搜索）
    表單異步驗證(表單提交驗證)
    異步加載內容數據(更多內容)
    數據邏輯處理

AJAX特點

    在不刷新當前頁面的前提下，與服務器進行異步交互
    優化了瀏覽器和服務器之間的數據傳輸、減少了不必要的數據往返
    把部分數據轉移到客戶端，減少了服務器的壓力

實現AJAX的基本思路

    根據需求選擇一個javascript類庫
    javascript部分向服務器傳遞數據
    php接受傳遞的數據，處理數據，返回給javascript
    javascript接受php的數據，並做相應處理

基礎知識

    前端方面:html css javascript jquery json
    服務器方面:php apache(nginx)
    數據庫方面:mysql sql

學習目標

    學習php和javascript之間異步交互
    理解ajax代碼的運行結構和基本原理
    清晰布局javascript代碼

效果圖

代碼實現

    創建基本的數據表
    完成顯示功能
    完成刪除數據功能
    完成添加數據功能
    完成修改數據功能

表SQL

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>
        <div 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>
        </div>
        <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:;">刪除&nbsp;</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'>確認&nbsp;</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'>保存&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(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://blog.csdn.net/qq_29627497/article/details/81365107

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 php+ajax實現答題總量數據的實時更新 Ajax實現表格實時編輯 php+Ajax 例子 php+ajax文件上傳 PHP+ajax實現二級聯動如何用php+ajax實現頁面的局部刷新？（轉） php+ajax 文件上傳 php+ajax文件上傳 php+ajax 登錄注冊頁面 php+ajax無刷新分頁原生ajax實現分頁最簡單完整實例-完整代碼，