javascript-ajax获取数据(php+mysql)

1、使用ajax请求数据

/*
 * $.Ajax()
 */
(function(o){
    o.$ = {
        "Ajax":function(obj){

            var http = null;
            var url = obj.url;
            var oBox = document.querySelector(".box");
            var pData = obj.data?obj.data:null;

            function objToString(obj){

                if(obj){
                    var str = '';
                    for(var i in obj){
                        str += i + "=" +obj[i] +"&";
                    }
                    return str;
                }else{
                    return null;
                }
                
            }

            function createHttp(){
                if(window.XMLHttpRequest){
                    http = new XMLHttpRequest();
                }else{
                    http = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
            createHttp();

            http.onreadystatechange = function(){

                if(http.readyState == 4 && http.status == 200){
                    var data = JSON.parse(http.responseText);
                    if(data.length){
                        obj.success(data);
                    }else{
                        console.warn("请求数据不存在！");
                    }    
                }


            };

            http.open(obj.type,url,true);
            http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); 
            http.send(objToString(pData));
        }
    };
})(window);


//采用Method GET
$.Ajax({
    url:"/ajaxGET.php?typeid=2&flag=h",
    type:"GET",
    success:function(data){
        console.log("GET");
        for(var i in data){
            console.log(data[i]);                
        }
    }
});

//采用Method POST
$.Ajax({
    url:"/ajaxPOST.php",
    type:"POST",
    data:{typeid:1,flag:"h"},
    success:function(data){
        console.log("POST");
        for(var i in data){
            console.log(data[i]);                
        }
    }
});

 

后端PHP输出数据(GET方式)：

<?php
/*
* 配置连接数据库信息
*/
$host='localhost';//主机
$user='root';//数据库账号
$password='';//数据库密码
$database='dedecmsv57utf8sp1';//数据库名
$tid=$_GET["typeid"];
$flag=$_GET["flag"];

//打开数据库连接
$db=mysqli_connect($host,$user,$password,$database);
//判断连接是否成功
if($db){
        $db->query("set names utf8");//设置UTF-8编码(JSON的唯一编码)
}else{
        echo 'DATABASE_CONNECTION_DIE';//数据库连接失败
        exit;
}
//sql查询语句
$sql="select * from dede_archives where typeid=".$tid." and flag='".$flag."'";

$result=mysqli_query($db,$sql);
$person_info = array();
while($row=mysqli_fetch_assoc($result)){
     $person_info[]=$row;//将取得的所有数据赋值给person_info数组
}
echo json_encode($person_info);//输出JSON

?>

后端输出数据(POST 方式)：

<?php
/*
* 配置连接数据库信息
*/
$host='localhost';//主机
$user='root';//数据库账号
$password='';//数据库密码
$database='dedecmsv57utf8sp1';//数据库名
$tid=$_POST["typeid"];
$flag=$_POST["flag"];

//打开数据库连接
$db=mysqli_connect($host,$user,$password,$database);
//判断连接是否成功
if($db){
        $db->query("set names utf8");//设置UTF-8编码(JSON的唯一编码)
}else{
        echo 'DATABASE_CONNECTION_DIE';//数据库连接失败
        exit;
}
//sql查询语句
$sql="select * from dede_archives where typeid=".$tid." and flag='".$flag."'";

$result=mysqli_query($db,$sql);
$person_info = array();
while($row=mysqli_fetch_assoc($result)){
     $person_info[]=$row;//将取得的所有数据赋值给person_info数组
}
echo json_encode($person_info);//输出JSON

?>

 

2、使用JONSP跨域请求

function callback(str){

    for(var i in str){
        console.log(str[i]['title']);
    }

}

需要修改PHP输出样式:

<?php
/*
* 配置连接数据库信息
*/
$host='localhost';//主机
$user='root';//数据库账号
$password='';//数据库密码
$database='dedecmsv57utf8sp1';//数据库名


//打开数据库连接
$db=mysqli_connect($host,$user,$password,$database);
//判断连接是否成功
if($db){
        $db->query("set names utf8");//设置UTF-8编码(JSON的唯一编码)
}else{
        echo 'DATABASE_CONNECTION_DIE';//数据库连接失败
        exit;
}
//sql查询语句
$sql="select * from dede_archives where typeid=1";

$result=mysqli_query($db,$sql);
$person_info = array();
while($row=mysqli_fetch_assoc($result)){
     $person_info[]=$row;//将取得的所有数据赋值给person_info数组
}
echo "callback(".json_encode($person_info).")"; //输出JSON 

最后一行输出 添加回调函数 echo "callback(".  . ")";