jQuery EasyUI + php + mySQL 实现数据显示

来源：互联网发布：安徽工业大学网络编辑：程序博客网时间：2024/04/28 09:13

1.首先我们需要在mysql数据库中建立一个表，如图：

我通过navicat 访问本地的mysql数据库，并且新建了一个数据库，名字叫做test。

在test数据库中新建了一个名为users的表，表中插入了五行数据。

2.然后我们编写php代码，获取这个表中的所有数据，并将数据以json格式显示在页面中。直接上代码：

<?php/** * Created by PhpStorm. * User: Administrator * Date: now 0020 * Time: 13:51 */$mysql_conf = array(    'host'    =>'127.0.0.1:3306',    'db'      =>'test',    'db_user'=>'root',    'db_pwd' =>'123456',);$mysqli=new mysqli($mysql_conf['host'],$mysql_conf['db_user'],$mysql_conf['db_pwd']);if($mysqli->connect_errno){    die("could not connect to the database:\n" . $mysqli->connect_errno);//诊断连接错误}$mysqli->query("set names 'utf8';");//编码转换$select_db = $mysqli->select_db($mysql_conf['db']);if(!$select_db){    die("could not connect to the db:/n" . $mysql->error);}$sql = "select * from users;";$res = $mysqli->query($sql);if(!$res){    die("sql error:/n" . $mysqli->error);}$result = array();while ($row = $res->fetch_assoc()){    /*var_dump($row);*/    array_push($result,$row);}echo json_encode($result);$res->free();$mysqli->close();?>

运行程序，得到如下页面：

3.通过jQuery EasyUI 将数据显示出来。

我用的php的编译器是JetBrains PhpStorm，

上面php的文件名为get_users.php，

我们在此文件目录下新建一个html文件，并将easyUI文件夹拷贝到此目录下，如图：

那么我们新建的html文件的代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Full Layout - jQuery EasyUI Demo</title>    <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css">    <link rel="stylesheet" type="text/css" href="easyUI/demo/demo.css">    <script type="text/javascript" src="easyUI/jquery.min.js"></script>    <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script></head><body><table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"       url="get_users.php"       toolbar="#toolbar"       rownumbers="true" fitColumns="true" singleSelect="true">    <thead>    <tr>        <th field="firstname" width="50">First Name</th>        <th field="lastname" width="50">Last Name</th>        <th field="phone" width="50">Phone</th>        <th field="email" width="50">Email</th>    </tr>    </thead></table><div id="toolbar">    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a></div></body></html>

运行效果图：

成功将数据库内的数据在页面上显示了出来。

阅读全文

0 0