1. 程式人生 > >php從資料庫中獲取資料用ajax傳送到前臺

php從資料庫中獲取資料用ajax傳送到前臺

1、資料庫的欄位:


2、php連線資料庫獲取資料庫的資訊放入json_encode($css);{檔案為:db.php}

<span style="font-size:14px;"><?php
$host="localhost";
$username="root";
$password="root";
$dbName="baixing";
$port=3306;
$conn=new mysqli($host,$username,$password,$dbName,$port);
if(!$conn){
    die("error:".$conn->connect_error);
}
//設定查詢結果的編碼,一定要放在query之前
$conn->query("SET NAMES 'UTF8'");
$result=$conn->query("select * from hotgoods");
//$conn->query()獲取的是二進位制
//將查詢的結果集封裝到一個數組裡
$css=$result->fetch_all();
//以json的格式傳送ajax的success中由data接收
echo json_encode($css);
$conn->close();</span>
3、將json_encode($css)的資料放在success:function(data)中,如下:{baixing.html}
$.ajax({
        type: 'POST',
        url: 'db.php',
        data:{
//            "username":"admin",
//            "password":"123456"
        },
        success: function (data) {
            var result=eval("("+data+")");
            alert(result);
            for(var i=0;i<result.length;i++){
                var str='<div class="home1">'+
                        '<img src="'+result[i][1]+'" alt="'+result[i][3]+'"/>'+
                        '<p><a href="'+result[i][2]+'">'+result[i][3]+'</a></p>'+
                        '<div class="price">'+
                        '<span>¥'+result[i][4]+'</span>'+
                        '<del>¥'+result[i][5]+'</del>'+
                        ' <a href="#">預定:<b>'+result[i][6]+'</b>件</a>'
                '</div> </div>'
                $(".box7 #hotSale").append(str);//追加到你需要放在的位置
            }
        }
    });$.ajax({
        type: 'POST',
        url: 'db.php',
        data:{
//            "username":"admin",
//            "password":"123456"
        },
        success: function (data) {
            var result=eval("("+data+")");
            alert(result);
            for(var i=0;i<result.length;i++){
                var str='<div class="home1">'+
                        '<img src="'+result[i][1]+'" alt="'+result[i][3]+'"/>'+
                        '<p><a href="'+result[i][2]+'">'+result[i][3]+'</a></p>'+
                        '<div class="price">'+
                        '<span>¥'+result[i][4]+'</span>'+
                        '<del>¥'+result[i][5]+'</del>'+
                        ' <a href="#">預定:<b>'+result[i][6]+'</b>件</a>'
                '</div> </div>'
                $(".box7 #hotSale").append(str);
            }
        }
    });
效果如圖:(此程式碼為部分程式碼,主要功能已實現,僅供參考)