文章詳情頁
ajax實現(xiàn)從后臺拿數(shù)據(jù)顯示在HTML前端的方法
瀏覽:57日期:2022-06-11 13:11:07
HTML頁面,ajax是基于id的,所有用id表示。
拿到的數(shù)據(jù)會顯示在這里
<div id="test"></div>
ajax源碼:
$(document).ready(function() { $.ajax({ url : "admin/get_online_ganbu.php",//后臺請求的數(shù)據(jù),用的是PHP dataType : "json",//數(shù)據(jù)格式 type : "post",//請求方式 async : false,//是否異步請求 success : function(data) { //如果請求成功,返回數(shù)據(jù)。 var html = ""; for(var i=0;i<data.length;i++){ //遍歷data數(shù)組 var ls = data[i]; html +="<span>測試:"+ls.name+"</span>"; } $("#test").html(html); //在html頁面id=test的標(biāo)簽里顯示html內(nèi)容 }, }) })
php源碼:
<?php include "conn.php";//這是鏈接數(shù)據(jù)的。 $result = mysql_query("SELECT * FROM online where class =1 "); $dataarr = array(); while($row = mysql_fetch_array($result)){ array_push($dataarr, $row); } mysql_close($con); echo json_encode($dataarr); ?>
以上這篇ajax實現(xiàn)從后臺拿數(shù)據(jù)顯示在HTML前端的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持。
標(biāo)簽:
Ajax
相關(guān)文章:
1. 利用promise及參數(shù)解構(gòu)封裝ajax請求的方法2. 基于Spring Boot利用 ajax實現(xiàn)上傳圖片功能3. ASP.NET MVC把數(shù)據(jù)庫中枚舉項的數(shù)字轉(zhuǎn)換成文字4. 不使用XMLHttpRequest對象實現(xiàn)Ajax效果的方法小結(jié)5. ajax動態(tài)加載json數(shù)據(jù)并詳細(xì)解析6. ajax和fetch的區(qū)別點總結(jié)7. AJAX實現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解8. AJAX淺析數(shù)據(jù)交換的實現(xiàn)9. ajax請求添加自定義header參數(shù)代碼10. .NET中實現(xiàn)對象數(shù)據(jù)映射示例詳解
排行榜
