mysql数据库与前端交互过程_php接⼝与前端数据交互实现⽰
例代码
本篇⽂章主要介绍了php 接⼝与前端数据交互实现⽰例代码，主要使⽤的是php+bootstrap-table+js，具有⼀定的参考价值，有兴趣的可以了解⼀下
最近在做前后端数据交互的尝试，也跳了很多坑，使⽤的是php+bootstrap-table+js，把⼀些收获记录在这⾥，⽅便查询。
这个⼩项⽬，仅有3个⽂件，分别为：
2.data.php
数据交互实现1：查询
2.php查询接⼝
3.前端数据展现
mysql 数据库建表数据库名称：crud
第⼀个表名：t_users
主键：user_id，⾃增长排列
php:
//测试php是否可以拿到数据库中的数据
/*echo "44444";*/
//做个路由 action为url中的参数
$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(){
//测试 运⾏crud.html时是否可以获取到 下⾯这个字符串
/
*echo "46545465465456465";*/
//查询表
$sql = "SELECT * FROM `t_users`";
$query = query_sql($sql);
while($row = $query->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;
}
>
前端实现：
#table {
padding: 0;
}
#table>tbody>tr {
cursor: pointer;
}
#table>tbody>tr>td.bs-checkbox {
vertical-align: middle;
}
增删改查
删除
新建
var $table = $('#table'),
$remove = $('#remove');
$(function() {
searchData();
});
function prepareDisplayData(data) {
return {
total: data.data.length,
fixedScroll: false,
rows: data.data
};
}
function searchData() {
var search_url = "./php/data.php";
//url 中问号后⾯的参数 action，这个对象就是查询的参数var dataParam = {
action: "init_data_list"
};
$.ajax({
type: "get",
url: search_url,
data: dataParam,
dataType: 'json',
contentType: 'application/json; charset=utf-8', success: function(data) {
//测试是否可以拿到php中的数据
console.log(data);
//遍历这个数组
sultCode == 200) {
var itemArr = data.data;
for(var i = 0; i < itemArr.length; i++) {
var item = itemArr[i];
console.log(item);
}
}
/
/bootstrap-table 组织数据
var displayData = prepareDisplayData(data);
al > 0) {
$('#table').bootstrapTable('load', displayData);
} else {
console.log("last page or empty.");
}
},
error: function(data) {
alert('服务器出错');
},
});
}
$('#table').bootstrapTable({
pagination: true,
sidePagination: 'server', //设置为服务器端分页pageNumber: 1,
pageSize: 10,
pageList: [10, 20, 50, 100],
search: true,
showColumns: true,
showRefresh: true,
columns: [{
field: 'state',
checkbox: true,php远程连接mysql数据库
}, {
field: 'user_id',
title: '⽤户Id',
width: '50',
align: 'center',
valign: 'middle'
}, {
field: 'user_name',
title: '⽤户名称',
width: '500',
align: 'center',
valign: 'middle'
}, {
field: 'user_age',
title: '⽤户年龄',
width: '500',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。