php mysql刷新表格_php读入mysql数据并以表格形式显示(表单实现无刷新提交)

该示例展示了如何使用HTML、CSS和JavaScript创建一个弹出窗口,其中包含一个表单用于无刷新提交。通过连接到PHP后端lishi.php,实现了对数据库的模糊查询功能。当用户在表单中输入内容并提交后,页面不会刷新,而是通过iframe显示查询结果。
摘要由CSDN通过智能技术生成

在网上参考了些例子,于是我这个sample实现了如标题上的功能。话不多说,上代码:

lishi.html

搜索

form#form1 {

height: 93%;

}

p {

width: 99%;

height: 84%;

}

iframe#id_iframe {

width: 99%;

height: 100%;

border: 0 red solid;

}

input{display:block;}

/* 拖拽*/

html, body

{

height:100%;

overflow:hidden;

}

body, div, h2

{

margin:0;

padding:0;

}

body{font:12px/1.5 Tahoma;}

center{padding-top:10px;}

button{cursor:pointer;}

#overlay

{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,0);

opacity:0.5;

filter:alpha(opacity=50);

display:none;

}

#win

{

position:absolute;

top:50%;

left:50%;

margin:-104px 0 0 -204px;

width:50%;

height:50%;

background:#fff;

border:4px solid #f90;

display:none;

}

h2

{

font-size:12px;

height:18px;

text-align:right;

background:#FC0;

border-bottom:3px solid #f90;

padding:5px;

cursor:move;

}

h2 span

{

color:#f90;

cursor:pointer;

background:#fff;

border:1px solid #f90;

padding:0 2px;

}

window.οnlοad=function()

{

var oWin=document.getElementById("win");

var oLay=document.getElementById("overlay");

var oBtn=document.getElementsByTagName("button")[0];

var oClose=document.getElementById("close");

var oH2=oWin.getElementsByTagName("h2")[0];

var bDrag=false;

var disX=disY=0;

oBtn.οnclick=function()

{

oLay.style.display="block";

oWin.style.display="block";

}

oClose.οnclick=function()

{

oLay.style.display="none";

oWin.style.display="none"

}

oH2.οnmοusedοwn=function(event)

{

var event=event||window.event;

bDrag=true;

disX=event.clientX-oWin.offsetLeft;

disY=event.clientY-oWin.offsetTop;

};

document.οnmοusemοve=function(event)

{

if(!bDrag) return;

var event=event||window.event;

var iL=event.clientX-disX;

var iT=event.clientY-disY;

var maxL=document.documentElement.clientWidth-oWin.offsetWidth;

var maxT=document.documentElement.clientHeight-oWin.offsetHeight;

iL=iL<0?0:iL;

iL=iL>maxL?maxL:iL;

iT=iT<0?0:iT;

iT=iT>maxT?maxT:iT;

oWin.style.marginTop=oWin.style.marginLeft=0;

oWin.style.left=iL+"px";

oWin.style.top=iT+"px";

};

document.οnmοuseup=function ()

{

bDrag=false;

};

};

input{

display: inline-block;

margin-top: 3%;

}

input#tijiao {

float: right;

margin-right: 9%;

}

input#txt_uname {

text-align: center;

margin-left: 3%;

width: 55%;

}

×

弹出层

上面的代码是为了实现弹出窗口。其效果图;

c26a4a2af9d7a65fe2e3486424ff59e0.png

接下来连接数据库lishi.php:

tr:hover{

background-color: aquamarine;

}

$servername = "服务器名称";

$username = "用户名";

$password = "密码";

$dbname = "数据库名";

?>

if (isset($_GET['uname'])) {

//连上数据库

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

// 设置编码,防止中文乱码

mysqli_query($conn , "set names utf8");

//查找

$sql = "SELECT * FROM 表名字 WHERE 属性名 LIKE '%".$_GET['uname']."%'";//实现模糊查询

//执行

$result = $conn->query($sql);

//输出值

if ($result->num_rows > 0) {

// 输出每行数据

echo '

ID名称描述

while($row = $result->fetch_assoc()) {

echo "

{$row['id']} ".

"

{$row['person_name']} ".

"

{$row['description']} ".

// "

{$row['submission_date']} ".

"

";

}echo '

';

} else {

echo "没数据";

}

//关闭数据库连接,释放资源

$conn->close();

}

?>

最后,在lishi.html中win里添加表单,并将表单的action属性指向lishi.php。所以lishi.html的body部分更改为:

×

//target指向空白的iframe目的为了实现表单的无刷新提交

//target指向空白的iframe目的为了实现表单的无刷新提交

弹出层

以上就是今天的sample了,效果图:

62c397b3da9b587a5435a34527054b50.png

内容来源于网络如有侵权请私信删除

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值