在網上參考了些例子，于是我這個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%;

}

×

彈出層

上面的代碼是為了實現彈出窗口。其效果圖;

接下來連接數據庫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了，效果圖：

內容來源于網絡如有侵權請私信刪除

總結

以上是生活随笔為你收集整理的php mysql刷新表格_php读入mysql数据并以表格形式显示（表单实现无刷新提交）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。