我刚刚开始学习ajax
。
这里我试图从jsgrid
中的mysql加载一个简单表(name-details(name,age))中的数据。
我有两个2个文件1)index.php
2)hello.php
在同一个文件夹中
index.php
:
<Doctype! HTML></Doctype!>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="css/jsgrid-theme.min.css" />
</head>
<body>
<div id="jsGrid"></div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jsgrid.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
hello.php
<?php
switch($_SERVER["REQUEST_METHOD"]) {
case "GET":
$dbhost = "localhost";
$dbuser = "root";
$dbpsw = "";
$dbname= "tp";
@$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpsw);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$data = array();
$stmt = $dbh->prepare("SELECT * FROM details");
$stmt->execute();
$affected_rows = $stmt->rowCount(); //Rows count
if ($affected_rows == 0) {
echo "no data";
exit();
}
foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
$data[] = $row;
}
echo json_encode($data);
break;
}
?>
main.js
$(document).ready(function(){
$("#jsGrid").jsGrid({
width: "70%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
filtering:true,
controller: {
loadData: function(filter) {
return $.ajax({
type: "GET",
url: "hello.php",
data: filter
});
}
},
fields: [
{ name: "name", title: "Name", type: "text", width: 150 },
{ name: "age", title: "Age", type: "number", width: 50, filtering: false },
{ type: "control" }
]
});
});
hello.php
显示了数据库中完美的数据输出,但在index.php
jsgrid
中没有数据加载到not found
,并显示fb://publish/?text=test
fb://post/test
fb://dialog/feed?app_id=fb_app_id&display=touch&href=test
fb://publish/post/?text=test
请帮助。 提前谢谢。