最近在做前后端数据交互的尝试，也跳了很多坑，使用的是php+bootstrap-table+js，把一些收获记录在这里，方便查询。

这个小项目，仅有3个文件，分别为：

1. crud.html
2. data.php
3. crud.sql

数据交互实现1：查询

1. mysql 数据库建表
2. php查询接口
3. 前端数据展现

mysql 数据库建表

• 　　数据库名称：crud
• 　　第一个表名：
• 　　主键：user_id，自增长排列

 

php:

     fetch_assoc()){            $data[] = $row;        }                $json = json_encode(array(            "resultCode"=>200,            "message"=>"查询成功！",            "data"=>$data        ),JSON_UNESCAPED_UNICODE);                //转换成字符串JSON        echo($json);    }            /**查询服务器中的数据     * 1、连接数据库,参数分别为 服务器地址 / 用户名 / 密码 / 数据库名称     * 2、返回一个包含参数列表的数组     * 3、遍历$sqls这个数组，并把返回的值赋值给 $s     * 4、执行一条mysql的查询语句     * 5、关闭数据库     * 6、返回执行后的数据     */    function query_sql(){        $mysqli = new mysqli("127.0.0.1", "root", "root", "crud");        $sqls = func_get_args();        foreach($sqls as $s){            $query = $mysqli->query($s);        }        $mysqli->close();        return $query;    }?>

前端实现：

            
             
             
             
             
             
             
             
                             
             
                                             
     
            
      删除            
      新建        
     
        
     
        
                     
                     
                         

实现效果：

 数据交互实现2：删除

在做删除时遇到不少的坑，究其原因是因为对SQL语句不熟悉，对php不熟悉，不过，总结了以下几点，供参考：

1. delete 返回的参数只能用 $_GET 获取；

2. delete 返回的参数要放在URL中，不能放在body中；body中的参数是用来查询的；

3. SQL语句一定要熟练，一步错，步步错；

4. 要在数据库中执行SQL语句检查语句是否执行正确，要使用 Rest Client 测试URL请求是否正确；

php:

前端实现JS部分：

var $table = $('#table'),    $remove = $('#remove');    $(function() {        delData();    });function delData() {                $remove.on('click', function() {                    if(confirm("是否继续删除")) {                        var rows = $.map($table.bootstrapTable('getSelections'), function(row) {                            //返回选中的行的索引号                            return row.user_id;                        });                    }                                        $.map($table.bootstrapTable('getSelections'),function(row){                        var del_url = "./php/data.php";                        //根据userId删除数据,因为这个id就是 传给服务器的参数                        var rowId = row.user_id;                                                $.ajax({                            type:"delete",                            url:del_url + "?action=del_row&rowId=" + rowId,                            dataType:"html",                            contentType: 'application/json;charset=utf-8',                            success: function(data) {                                $table.bootstrapTable('remove',{                                    field: 'user_id',                                    values: rows                                });                                $remove.prop('disabled', true);                            },                            error:function(data){                                alert('删除失败！');                            }                        });                    });                })            }

调试方法：

 数据交互实现3：新增

在写php的方法上，我觉得我的方法是有问题的，因为所有的参数，也就是所有的需要新增的数据都是通过 接口以 ？ 后跟参数的方式添加成功的。功能是可以实现，但是如果新增的数据较大，这个方法显示是不可行的，但是还没有找到合适的方法，烦请大侠们指点。

php:

     query($s);        }        $mysqli->close();        return $query;    }?>

前端实现JS部分：

html使用了bootstrap 的 modal作为新增时的弹出框

             
     
            
      
                
       
                    
        
                        
         ×                        
         
用户新增
                    
        
                    
        
                        
         
                            
          
 
           用户名称 
            
          
                            
          
 
           用户年龄 
            
          
                            
          
 
           用户性别 
           
 
             请选择 男 女  
           
 
          
                        
         
                    
        
                    
        
                        
         关闭                        
         保存                    
        
                
       
            
      
        
     

var $table = $('#table'),      $remove = $('#remove');    $(function() {            searchData();        delData();                        $('#save').click(function(){            addData();        });    }); function addData(){                var userName = $('#userName').val();                var userAge = $("#userAge").val();                var userSex = $('#user-sex').val() == '0' ? '男' : '女';                                var addUrl = "./php/data.php?action=add_row&user_name=" + userName + "&user_age=" + userAge + "&user_sex=" + userSex;                                $.ajax({                    type:"post",                    url:addUrl,                    dataType:'json',                    contentType:'application/json;charset=utf-8',                    success:function(data){                        console.log("success");                    },                    error:function(data){                        console.log("data");                        //添加成功后隐蒧modal框                        setTimeout(function(){                            $('#exampleModal').modal('hide');                        },500); 　　　　　　　　　　　　　　//隐藏modal框后重新加载当前页                        setTimeout(function(){                            searchData();                        },700);                    }                });            }

至此，还没有解决如下问题：

1. 表单验证；
2. 添加多条数据后，php如何接收参数；
3. 新增成功后，在$.ajax的方法中，为什么，新增成功后的其它操作要在 error 这个对象中实现？而不是在 sucess 中实现？

明晚再解决。