以下分别为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();
?>