微信开发-排行榜 

1,先定义一个ajax函数,供后面调用

  1 function ajax(method,url,data,callback){
  2 
  3   var xhr = null;
  4 
  5   if( window.ActiveXObject ){
  6     xhr = new ActiveXObject('Microsoft.XMLHTTP');
  7   }else{
  8     xhr = new XMLHttpRequest();
  9   }
 10 
 11   xhr.onreadystatechange = function(){
 12 
 13     if( xhr.readyState == 4 ){
 14 
 15       if( xhr.status == 200 ){
 16 
 17         callback && callback( xhr.responseText );
 18 
 19       }
 20 
 21     }
 22 
 23   };
 24 
 25   if( method == 'post'){
 26 
 27     xhr.open(method,url);
 28     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 29     xhr.send( encodeURI(data) );
 30 
 31   }else{
 32 
 33     xhr.open(method,url+'?'+encodeURI(data));
 34     xhr.send(null);
 35 
 36   }
 37 
 38 }
 39 2,要写的html文件,通过ajax从php文件获取data数据
 40 
 41 <!DOCTYPE html>
 42 <html lang="en">
 43 <head>
 44   <meta charset="UTF-8">
 45   <title>Document</title>
 46   <style type="text/css">
 47       img{
 48         width: 100px;
 49       }
 50   </style>
 51 </head>
 52 <body> 
 53     <table id="tb">
 54         <tr>
 55           <th>得分</th>
 56           <th>昵称</th>
 57           <th>地区</th>
 58           <th>openid</th>
 59         </tr>
 60         
 61     </table>
 62 </body>
 63 <script type="text/javascript" src="ajax.js"></script>
 64 <script type="text/javascript">
 65   var aTb = document.getElementById('tb');
 66   ajax(
 67     'get', 
 68     'ranking.php', 
 69     '',
 70     function( data ){
 71         console.log( data );
 72             data = JSON.parse(data);
 73         for (var i in data) {
 74           var atr = document.createElement("tr")
 75           atr.innerHTML = "<td>"+data[i].score+"</td><td><td><img src="+data[i].headimgurl+"><span>"+data[i].nickname+"</span></td></td><td>"+data[i].country+data[i].province+data[i].city+"</td><td>"+data[i].openid+"</td>";
 76           aTb.appendChild(atr);
 77 
 78         };    
 79 
 80       }
 81   );
 82 
 86 </script>
 87 </html>
 88 
3,php文件:
 89 <?php
 90 $mysqli=new mysqli(SAE_MYSQL_HOST_M.":".SAE_MYSQL_PORT,SAE_MYSQL_USER,SAE_MYSQL_PASS,SAE_MYSQL_DB);
 91 if($mysqli->connect_errno){
 92     die($mysqli->connect_error);
 93 }
 94 $mysqli->query("set names utf-8");
 95 
 96 $sql = "SELECT * FROM `gameRanking`";
 97 
 98 $results = $mysqli->query($sql);
 99 
100 $arr = array();
101 
102 while( $row = $results->fetch_assoc() ){
103 
104   //循环取出所有数据并把数据存入数组中。
105 
106   array_push( $arr , $row);
107   //array_push(存入到哪个数组中,要存入数组的值)
108 };
109 //将保存所有数据的数组转换成 json字符串
110 $str = json_encode( $arr );
111 
112 //将字符串数据返回给前端页面
113 echo $str;
114 
115 //关闭数据库连接
116 $mysqli->close();
117 
118 ?>

 

posted @ 2016-07-23 18:51  前端之路路漫长  阅读(255)  评论(0)    收藏  举报