Ajax 加載數(shù)據(jù) 練習(xí)代碼
前端與js代碼
<h1>顯示數(shù)據(jù)</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>代號(hào)</td>
<td>姓名</td>
<td>性別</td>
<td>民族</td>
<td>生日</td>
<td>操作</td>
</tr>
<tbody id="bg">
</tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
jiazai;
});
//加載數(shù)據(jù)的方法
function jiazai
{
//異步
$.ajax({
url:"jiazai.php",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><input type='button' value='刪除' class='shanchu' code='"+lie[0]+"' /></td></tr>";
}
$("#bg").html(str);
$(".shanchu").click(function{
var code = $(this).attr("code");
$.ajax({
url:"shanchu.php",
data:{c:code},
type:"POST",
dataType:"TEXT",
success: function(d){
if(d.trim=="OK")
{
//重新加載
jiazai;
}
else
{
alert("刪除失敗");
}
}
});
})
}
});
}
</script>
再做個(gè)處理頁(yè)面jiazai.php
<?php
include("DBDA.class.php");
$db = new DBDA;
$sql = "select * from info";
echo $db->StrQuery($sql);
再做個(gè)刪除 shanchu.php
<?php
include("DBDA.class.php");
$db = new DBDA;
$code = $_POST["c"];
$sql = "delete from info where code='{$code}'";
if($db->Query($sql,0))
{
echo "OK";
}
else
{
echo "NO";
}
主要學(xué)了ajax的封裝方法,方法就叫做加載數(shù)據(jù),當(dāng)要求頁(yè)面不刷新的時(shí)候,就用這個(gè)方法就可以
頁(yè)面加載數(shù)據(jù)完成后,要調(diào)一遍
刪除完之后需要再加載一遍,要在調(diào)一遍
Ajax 默認(rèn)是異步的
異步就是 ajax去調(diào)處理頁(yè)面,處理數(shù)據(jù)的時(shí)候,代碼繼續(xù)往下走
- 使用Bootstrap Tabs選項(xiàng)卡Ajax加載數(shù)據(jù)實(shí)現(xiàn)
- AJAX和jQuery動(dòng)態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法
- Javascript vue.js表格分頁(yè),ajax異步加載數(shù)據(jù)
- vue.js 表格分頁(yè)ajax 異步加載數(shù)據(jù)
- jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫(huà)
- Ajax點(diǎn)擊不斷加載數(shù)據(jù)列表
- jQuery結(jié)合AJAX之在頁(yè)面滾動(dòng)時(shí)從服務(wù)器加載數(shù)據(jù)
- php+ajax實(shí)現(xiàn)無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
- Ajax動(dòng)態(tài)加載數(shù)據(jù)庫(kù)示例
- jquery Ajax 實(shí)現(xiàn)加載數(shù)據(jù)前動(dòng)畫(huà)效果的示例代碼
- 滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
相關(guān)文章
js AppendChild與insertBefore用法詳細(xì)對(duì)比
本篇文章主要是對(duì)js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的對(duì)比。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
原生js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
使弱類型的語(yǔ)言JavaScript變強(qiáng)勢(shì)
Javascript (ECMA Script)是一種弱類型的語(yǔ)言.這并不意味著它沒(méi)有數(shù)據(jù)類型,只是變量或者Javascript對(duì)象屬性不需要一個(gè)特定類型的值分配給它或者它始終使用相同的值.Javascript中的變量同樣支持自由類型轉(zhuǎn)換成為適用(或者要求)的內(nèi)容以便于使用.2009-06-06
JS根據(jù)Unix時(shí)間戳顯示發(fā)布時(shí)間是多久前【項(xiàng)目實(shí)測(cè)】
小編最近在實(shí)現(xiàn)這樣的需求類似微信朋友圈顯示發(fā)布時(shí)間為距離當(dāng)前時(shí)間多久之前這樣的功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2019-07-07
使用layui日期控件laydate對(duì)開(kāi)始和結(jié)束時(shí)間進(jìn)行聯(lián)動(dòng)控制的方法
今天小編就為大家分享一篇使用layui日期控件laydate對(duì)開(kāi)始和結(jié)束時(shí)間進(jìn)行聯(lián)動(dòng)控制的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09

