php 入门，获取数据库数据到数据绑定，上传数据到数据库

最新推荐文章于 2021-04-01 21:57:50 发布

小二来个美妞

最新推荐文章于 2021-04-01 21:57:50 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/z807458494y/article/details/78967548

版权

所采用的本地服务器是 phpstudy，HUI 作为主框架
主要文件分3块，demo.html, demo.php, sql.php

sql.php 作为连接mysql数据库的关键!!!

<?php
$dbHOST='localhost';
$dbUserName='root';
$dbPWD='root';
$dbName='numdb';
$char='utf8';
$conn=new mysqli($dbHOST,$dbUserName,$dbPWD,$dbName);

if(mysqli_connect_error()){
echo '连接失败';
}
?>

demo.php 作为执行sql 语句，给前台页面返回json 数据

<?php
require("sqldb.php");
$control=$_POST['db'];
$addname=$_POST['username'];
$addpasswd=$_POST['userpasswd'];
$addage=$_POST['userage'];

switch($control){
case 'userinfo':
user_fun();
break;

case 'addinfo':
add_fun();
break;

default :

break;
}

//获取数据库数据
function user_fun(){
global $conn;
$conn->query("set names 'utf8'");
$result=$conn->query("select * from admin");
$arr=[];
if($result){
foreach($result as $thisVal){
array_push($arr,$thisVal);
}
}
$json_str=json_encode(array('data'=>$arr));
echo $json_str;
}

//数据库存数据
function add_fun(){
global $conn,$addname,$addpasswd,$addage;
if(selectByUserName($addname)>0){
echo '已经存在';
}else{

$conn->query("set names $char");
$result=$conn->query("insert into admin (id,name,passwd,age) values('','$addname','$addpasswd','$addage')");
if($result){
echo 'ok';
}else{
echo 'no';
}

}
}
function selectByUserName($username){
global $conn;
$conn->query("set names 'utf8'");
$result=$conn->query("select * from admin where name='$username'");

if($num=mysqli_num_rows($result)){
return $num;
}

}
?>

demo.html 作为展示页和数据上传页

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>sql数据</title>
<link rel="stylesheet" type="text/css" href="h-ui/css/H-ui.css" />
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}

.table_div {
width: 800px;
margin: 0 auto;
}

.table_db {
text-align: center;
margin-top: 20px;
}

.tan_box {
width: 500px;
height: 350px;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -250px;
background: navajowhite;
border-radius: 10px;
}

.tan_box input {
width: 300px;
}

#closedb {
color: blue;
position: absolute;
bottom: 20px;
right: 20px;
font-size: 15px;
cursor: pointer;
text-decoration: underline;
}

#closedb:hover {
font-style: italic;
}
</style>
</head>
<div class="table_div">
<table class="table table-border table-bordered table-hover">
<thead class="text-c">
<tr class="active">
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="table_db">

</tbody>
</table>
</div>
<div class="table_db">
<input class="btn btn-primary radius" type="button" value="添加数据" id="butt_db">
</div>
<div class="tan_box" style="display: none;">
<div class="mt-40 ml-20">
<label>姓名:</label>
<input type="text" class="input-text" / id="user_name">
</div>
<div class="mt-20 ml-20">
<label>密码:</label>
<input type="text" class="input-text" / id="user_passwd">
</div>
<div class="mt-20 ml-20">
<label>年龄:</label>
<input type="text" class="input-text" / id="user_age">
</div>
<div class="mt-50 ml-50">
<input class="btn btn-primary radius" type="button" value="提交" id="sub_db">
</div>
<div id="closedb">退出>></div>
</div>

<body>

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
getUserInfo();
}
//数据获取
var ajax = null;

function getUserInfo() {
ajax = new XMLHttpRequest();
ajax.onreadystatechange = readState;
ajax.open('post', 'demo.php', true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send('username=&userpasswd=&userage=&db=userinfo');
}

function readState() {
if(ajax.readyState == 4 && ajax.status == 200) {
var result = ajax.responseText;
// console.log(ajax.responseText);
// console.log(result);
var obj = eval('(' + result + ')');
var htmlstr = '';
for(var i = 0; i < obj.data.length; i++) {
htmlstr += '<tr class="text-c"><td>' + obj.data[i].name + '</td><td>' + obj.data[i].passwd + '</td><td>' + obj.data[i].age + '</td></tr>';
}

}
$("#table_db").html(htmlstr);
}

$("#butt_db").click(function() {
$(".tan_box").show();
});

//数据上传
$("#sub_db").click(function() {

var aja = null;
var namedb = $("#user_name").val();
var passwddb = $("#user_passwd").val();
var agedb = $("#user_age").val();
// (namedb!=''||namedb!=null)&&(passwddb!=''||passwddb!=null)&&(agedb!=''||agedb!=null)
if(namedb != '' && namedb != ' ' && namedb != null && passwddb != '' && passwddb != ' ' && passwddb != null && agedb != '' && agedb != ' ' && agedb != null) {

aja = new XMLHttpRequest();
aja.onreadystatechange = readState;
aja.open('POST', 'demo.php', true);
aja.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
aja.send('username=' + namedb + '&userpasswd=' + passwddb + '&userage=' + agedb + '&db=addinfo');

function readState() {
if(aja.readyState == 4 && aja.status == 200) {
// alert(aja.responseText);
var result = aja.responseText;
if(result.indexOf('已经存在') != -1) {
alert('该用户已经存在');
} else {
$(".tan_box").hide();
history.go(0);
alert('添加成功');
}
} else if(aja.status > 200) {
alert('添加失败');
}
}
} else {
alert('数据不能为空！！');
}
});
$("#closedb").click(function() {
$(".tan_box").hide();
});
</script>

</html>

小二来个美妞

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
php 入门，获取数据库数据到数据绑定，上传数据到数据库

所采用的本地服务器是 phpstudy，HUI 作为主框架主要文件分3块，demo.html, demo.php, sql.phpsql.php 作为连接mysql数据库的关键!!!$dbHOST='localhost';$dbUserName='root';$dbPWD='root';$dbName='numdb';$char='utf8';$conn=new
复制链接

扫一扫