8***@qq.com
8***@qq.com
  • 发布:2017-11-29 11:37
  • 更新:2017-11-29 11:37
  • 阅读:2391

关于mui的ajax获取json数据的问题

分类:MUI

以下分别为ajax获取数据的页面代码和php获取数据库数据的代码,php可以获取到数据库的数据,但是ajax获取不到json数据,请问怎么解决?
<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <title>Hello MUI</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  

    <link rel="stylesheet" href="../css/mui.min.css">  
</head>  
<!--下拉刷新容器-->  
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
    <div class="mui-scroll">  
        <!--数据列表-->  
        <ul id="news" class="mui-table-view mui-table-view-chevron">  

        </ul>  
    </div>  
</div>  

<script id="list" type="text/html">  
    {{each stories as list}}  
    <li class="mui-table-view-cell mui-media">  
        <a href="javascript:;" class="mui-navigate-right">  
            <img class="mui-media-object mui-pull-left" src="{{list.images[0]}}" />  
            <div class="mui-media-body" style="font-size: 12px;">  
                {{list.title}}  
            </div>  
        </a>  
    </li>  
    {{/each}}  
</script>  

<body>  
    <script src="../js/template-web.js"></script>  
    <script src="../js/mui.min.js"></script>  
    <script>  
        mui.init({  
            pullRefresh: {  
                container: '#pullrefresh',  
                down: {  
                    callback: pulldownRefresh  
                },  
                up: {  
                    contentrefresh: '正在加载...',  
                    callback: pullupRefresh  
                }  
            }  
        });  
        mui.plusReady(function() {  
            mui.ajax('http://localhost/panshi/news/listview/listview.php?__hbt=1511925909411', {  
                dataType: 'json', //服务器返回json格式数据  
                type: 'GET', //HTTP请求类型  
                timeout: 10000, //超时时间设置为10秒;  
                headers: {  
                    'Content-Type': 'application/json'  
                },  
                success: function(data) {  
                    //服务器返回响应,根据响应结果  
                    //获取数据  
                    var html=template('list',data);  
                    document.getElementById("news").innerHTML=html;  
                },  
                error: function(xhr, type, errorThrown) {  
                    //异常处理;  
                    console.log(type);  
                }  
            });  
        });  
        /**  
         * 下拉刷新具体业务实现  
         */  
        function pulldownRefresh() {  
            setTimeout(function() {  
                var table = document.body.querySelector('.mui-table-view');  
                var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                for(var i = cells.length, len = i + 7; i < len; i++) {  
                    var li = document.createElement('li');  
                    li.className = 'mui-table-view-cell';  
                    li.innerHTML = '<a class="mui-navigate-right">' + '<img class="mui-media-object">' + '<div class="mui-media-body">' + '</div>' + '</a>';  
                    //下拉刷新,新纪录插到最前面;  
                    table.insertBefore(li, table.firstChild);  
                }  
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
            }, 1500);  
        }  
        var count = 0;  
        /**  
         * 上拉加载具体业务实现  
         */  
        function pullupRefresh() {  
            setTimeout(function() {  
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                var table = document.body.querySelector('.mui-table-view');  
                var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                for(var i = cells.length, len = i + 5; i < len; i++) {  
                    var li = document.createElement('li');  
                    li.className = 'mui-table-view-cell';  
                    li.innerHTML = '<a class="mui-navigate-right">' + '<img class="mui-media-object">' + '<div class="mui-media-body">' + '</div>' + '</a>';  
                    table.appendChild(li);  
                }  
            }, 1500);  
        }  
    </script>  
</body>  

</html>

<?php
header("content-Type: application/json;charset=utf-8");
header("Access-Control-Allow-Origin:*");
header('Access-Control-Allow-Methods:GET');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
$hostname="127.0.0.1";
$username="root";
$password="leunghb";
$database="panshi";
//创建连接
$conn=new mysqli($hostname,$username,$password,$database);
//检测连接
if($conn->connect_errno){
die("Connection filed:" . $conn->connect_error);
}
$sql="select thumb,id,title from yzn_article";
$result=$conn->query($sql);

$arr=array();  
//输出每行数据  
while($row=$result->fetch_assoc()){  
    $count=count($row);  
    for($i=0;$i<$count;$i++){  
        unset($row[$i]);  
    }  
    array_push($arr,$row);  
}  
echo json_encode($arr,JSON_UNESCAPED_UNICODE);  

$conn->close();  

?>

2017-11-29 11:37 1 条评论 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复