PHP+Ajax实时表格编辑

第1章 Ajax运用场景分析及课前准备

    1.1  Ajax的应用场景

        1 异步搜索过滤内容数据

PHP+Ajax实时表格编辑

        2 表单的异步验证

PHP+Ajax实时表格编辑

        3 异步加载内容数据

PHP+Ajax实时表格编辑

        4 低调处理一些数据逻辑

PHP+Ajax实时表格编辑

    1.2 Ajax的特点及实现思路

        主要特点:

            1 在不刷新当前页面的前提下,与服务器进行异步交互    

            2 优化了浏览器与服务器之间的数据传输,减少了不必要的数据往返

            3 把数据处理转移到客户端,减少了服务器的压力

        实现思路:

            1 根据需求选择一个javascript类库

            2 javascript部分向服务器端传递数据

            3 php接收传递的数据,处理数据,返回给javascript

            4 javascript接收php的数据,并做相应处理

    1.3 项目课前准备

            

PHP+Ajax实时表格编辑

PHP+Ajax实时表格编辑

    1.4 最终作品展示

第2章 Ajax完成异步实现表格实时编辑

    2.1 代码实现基本步骤

        1 创建基本数据表,数据库权限

        2 完成显示功能

        3 完成删除数据的功能

        4 完成添加数据的功能

        5 完成修改数据的功能

    2.2 创建数据表及用户授权

          source db.sql;导入数据库      

    2.3 显示数据之Ajax结构搭建

        1 显示出来一个基本的html

        2 $.get==》data.php数据

            通过$_GET获取action路由,执行相应的操作

        3 data.php获取db的数据

        4 js create_row

    2.4 显示数据之前端循环显示

PHP+Ajax实时表格编辑

debugger 断点测试 $.parseJSON(data) 是把json转化成数组

PHP+Ajax实时表格编辑

    2.5 显示数据之循环读取数据

PHP+Ajax实时表格编辑

    2.6 Ajax异步删除数据

PHP+Ajax实时表格编辑

parent().parent().remove

PHP+Ajax实时表格编辑

    2.7 添加数据之前端结构搭建

    1 UI 添加按钮,8哥文本框,操作列

    2 取消添加功能

    3 确认添加按钮,收集UI的数据->data.php

    4 data.php --js

    5 转正常记录的显示模式

PHP+Ajax实时表格编辑


    2.7 添加数据之前端结构搭建


    2.8 添加数据之Ajax异步数据传输

    

PHP+Ajax实时表格编辑

    2.9 添加数据之前台数据显示

PHP+Ajax实时表格编辑

    2.10 编辑数据之前端编辑界面事件

    1 编辑按钮替换UI 

    2 取消编辑的事件

    3 保存编辑的事件,收集数据-》data.php

    4 data.php->js

    5 js行恢复正常状态

    2.11 编辑数据之异步修改数据入库

缺少点jquery的基本操作和parent().parent()的语法