Ajax 加載數(shù)據(jù) 練習(xí)代碼
前端與js代碼
<h1>顯示數(shù)據(jù)</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>代號</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>
再做個處理頁面jiazai.php
<?php
include("DBDA.class.php");
$db = new DBDA;
$sql = "select * from info";
echo $db->StrQuery($sql);
再做個刪除 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ù),當要求頁面不刷新的時候,就用這個方法就可以
頁面加載數(shù)據(jù)完成后,要調(diào)一遍
刪除完之后需要再加載一遍,要在調(diào)一遍
Ajax 默認是異步的
異步就是 ajax去調(diào)處理頁面,處理數(shù)據(jù)的時候,代碼繼續(xù)往下走
- 使用Bootstrap Tabs選項卡Ajax加載數(shù)據(jù)實現(xiàn)
- AJAX和jQuery動態(tài)加載數(shù)據(jù)的實現(xiàn)方法
- Javascript vue.js表格分頁,ajax異步加載數(shù)據(jù)
- vue.js 表格分頁ajax 異步加載數(shù)據(jù)
- jQuery Ajax 加載數(shù)據(jù)時異步顯示加載動畫
- Ajax點擊不斷加載數(shù)據(jù)列表
- jQuery結(jié)合AJAX之在頁面滾動時從服務(wù)器加載數(shù)據(jù)
- php+ajax實現(xiàn)無刷新動態(tài)加載數(shù)據(jù)技術(shù)
- Ajax動態(tài)加載數(shù)據(jù)庫示例
- jquery Ajax 實現(xiàn)加載數(shù)據(jù)前動畫效果的示例代碼
- 滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)探討
相關(guān)文章
JavaScript中統(tǒng)計Textarea字數(shù)并提示還能輸入的字符
是在文本框中輸入文字的時候,會自動統(tǒng)計輸入的字符,并顯示用戶還能輸入的字符,其實js也可以實現(xiàn),下面就以示例的方式為大家講解下2014-06-06
js與jquery分別實現(xiàn)tab標簽頁功能的方法
這篇文章主要介紹了js與jquery分別實現(xiàn)tab標簽頁功能的方法,結(jié)合實例形式對比分析了javascript與jQuery分別實現(xiàn)tab標簽功能的操作技巧,需要的朋友可以參考下2016-11-11
不用AI也能實現(xiàn)的文字自動播報(SpeechSynthesis文本實例合成)
SpeechSynthesis是HTML5的一個新特性,基于SpeechSynthesis可以實現(xiàn)在客戶瀏覽器端進行動態(tài)文本的語音合成播放,這篇文章主要介紹了不用AI也能實現(xiàn)的文字自動播報(SpeechSynthesis文本實例合成),需要的朋友可以參考下2023-03-03
一文讓你徹底弄懂js中undefined和null的區(qū)別
JavaScript是一門動態(tài)類型語言,元素除了表示存在的空值外,還有可能根本就不存在,這就是undefined存在的原因,這篇文章主要給大家介紹了關(guān)于undefined和null區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-03-03
微信小程序wx.previewImage預(yù)覽圖片實例詳解
下面通過實例代碼給大家講解了微信小程序wx.previewImage預(yù)覽圖片功能,需要的朋友可以參考下2017-12-12
從歷史講起JavaScript基因里的函數(shù)式編程實例
這篇文章主要為大家介紹了從歷史講起JavaScript基因里的函數(shù)式編程實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10
electron實現(xiàn)讀取和寫入配置文件的示例詳解
這篇文章主要介紹了electron實現(xiàn)讀取和寫入配置文件的示例,文中通過代碼示例和圖文結(jié)合的方式介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03

