ajax實(shí)現(xiàn)從后臺(tái)拿數(shù)據(jù)顯示在HTML前端的方法
HTML頁面,ajax是基于id的,所有用id表示。
拿到的數(shù)據(jù)會(huì)顯示在這里
<div id="test"></div>
ajax源碼:
$(document).ready(function() { $.ajax({ url : "admin/get_online_ganbu.php",//后臺(tái)請(qǐng)求的數(shù)據(jù),用的是PHP dataType : "json",//數(shù)據(jù)格式 type : "post",//請(qǐng)求方式 async : false,//是否異步請(qǐng)求 success : function(data) { //如果請(qǐng)求成功,返回?cái)?shù)據(jù)。 var html = ""; for(var i=0;i<data.length;i++){ //遍歷data數(shù)組 var ls = data[i]; html +="<span>測(cè)試:"+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實(shí)現(xiàn)從后臺(tái)拿數(shù)據(jù)顯示在HTML前端的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript Ajax獲取遠(yuǎn)程url的返回判斷
將以下文本放入一個(gè)HTML頁面即可看到效果,將會(huì)有兩次彈出提示,最后在頁面上顯示YES,表示完成2012-01-01有關(guān)Ajax中g(shù)et和post的使用問題
下面小編就為大家?guī)硪黄嘘P(guān)Ajax中g(shù)et和post的使用問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06Ajax讀取txt并對(duì)txt內(nèi)容進(jìn)行分頁顯示功能
這篇文章給大家介紹了Ajax讀取txt并對(duì)txt內(nèi)容進(jìn)行分頁顯示功能,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
這篇文章主要介紹了基于bootstrap的上傳插件fileinput 的ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03JS AJAX前臺(tái)如何給后臺(tái)類的函數(shù)傳遞參數(shù)
這篇文章主要介紹了JS AJAX前臺(tái)給后臺(tái)類的函數(shù)傳遞參數(shù)的方法,下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下2014-06-06Ajax 的初步實(shí)現(xiàn)(使用vscode+node.js+express框架)
這篇文章給大家介紹使用vscode+node.js+express框架操作ajax的初步實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-06-06