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è)處理頁面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)要求頁面不刷新的時(shí)候,就用這個(gè)方法就可以
頁面加載數(shù)據(jù)完成后,要調(diào)一遍
刪除完之后需要再加載一遍,要在調(diào)一遍
Ajax 默認(rèn)是異步的
異步就是 ajax去調(diào)處理頁面,處理數(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表格分頁,ajax異步加載數(shù)據(jù)
- vue.js 表格分頁ajax 異步加載數(shù)據(jù)
- jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫
- Ajax點(diǎn)擊不斷加載數(shù)據(jù)列表
- jQuery結(jié)合AJAX之在頁面滾動(dòng)時(shí)從服務(wù)器加載數(shù)據(jù)
- php+ajax實(shí)現(xiàn)無刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
- Ajax動(dòng)態(tài)加載數(shù)據(jù)庫示例
- jquery Ajax 實(shí)現(xiàn)加載數(shù)據(jù)前動(dòng)畫效果的示例代碼
- 滑輪滾動(dòng)到頁面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
相關(guān)文章
JavaScript中統(tǒng)計(jì)Textarea字?jǐn)?shù)并提示還能輸入的字符
是在文本框中輸入文字的時(shí)候,會(huì)自動(dòng)統(tǒng)計(jì)輸入的字符,并顯示用戶還能輸入的字符,其實(shí)js也可以實(shí)現(xiàn),下面就以示例的方式為大家講解下2014-06-06
js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法
這篇文章主要介紹了js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法,結(jié)合實(shí)例形式對(duì)比分析了javascript與jQuery分別實(shí)現(xiàn)tab標(biāo)簽功能的操作技巧,需要的朋友可以參考下2016-11-11
不用AI也能實(shí)現(xiàn)的文字自動(dòng)播報(bào)(SpeechSynthesis文本實(shí)例合成)
SpeechSynthesis是HTML5的一個(gè)新特性,基于SpeechSynthesis可以實(shí)現(xiàn)在客戶瀏覽器端進(jìn)行動(dòng)態(tài)文本的語音合成播放,這篇文章主要介紹了不用AI也能實(shí)現(xiàn)的文字自動(dòng)播報(bào)(SpeechSynthesis文本實(shí)例合成),需要的朋友可以參考下2023-03-03
一文讓你徹底弄懂js中undefined和null的區(qū)別
JavaScript是一門動(dòng)態(tài)類型語言,元素除了表示存在的空值外,還有可能根本就不存在,這就是undefined存在的原因,這篇文章主要給大家介紹了關(guān)于undefined和null區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-03-03
微信小程序wx.previewImage預(yù)覽圖片實(shí)例詳解
下面通過實(shí)例代碼給大家講解了微信小程序wx.previewImage預(yù)覽圖片功能,需要的朋友可以參考下2017-12-12
JS時(shí)間控制實(shí)現(xiàn)動(dòng)態(tài)效果的實(shí)例講解
下面小編就為大家?guī)硪黄狫S時(shí)間控制實(shí)現(xiàn)動(dòng)態(tài)效果的實(shí)例講解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
從歷史講起JavaScript基因里的函數(shù)式編程實(shí)例
這篇文章主要為大家介紹了從歷史講起JavaScript基因里的函數(shù)式編程實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
electron實(shí)現(xiàn)讀取和寫入配置文件的示例詳解
這篇文章主要介紹了electron實(shí)現(xiàn)讀取和寫入配置文件的示例,文中通過代碼示例和圖文結(jié)合的方式介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03

