AJAX, PHP returning undefined or nothing
Question
I have 3 files.
1.) The file for displaying it
<div id="tweet">
</div>
this is where it should be displayed.
2.)the php file that gets the data from the database
function ajaxGetTweets()
{
$stmtSelectTweets = $this->db->prepare('SELECT * FROM tweets');
$stmtSelectTweets->setFetchMode(PDO::FETCH_ASSOC);
$stmtSelectTweets->execute();
$data = $stmtSelectTweets->fetchAll();
print_r(json_encode($data));
}
this function return the result in json, i got the right format when i use print_r
3.) the js file for ajax
$( document ).ready(function() {
$.get("homescreen/ajaxGetTweets", function( o )
{
for(var i = 0; i < o.length; i++)
{
$("#tweet").append("<div>"+o[i].tweet+"</div>");
}
}, "json");
});
when leaving the "json" at the end of the $.get function i got a result in my div as undefined, when using "json", i got nothing.
in the console i got a warning like:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/ .
Output: <!DOCTYPE HTML>
<html>
<head>
<title>Twitter</title>
<link rel="stylesheet" href="http://localhost/mvc_tut/public/css/bootstrap.min.css">
<script type="text/javascript" src="http://localhost/mvc_tut/public/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://localhost/mvc_tut/public/js/bootstrap.min.js"></script>
</script>
</head>
<body>
<div id="header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="http://localhost/mvc_tut/index">Startseite<span class="sr-only">(current)</span></a></li>
<li><a href="http://localhost/mvc_tut/ueberuns">Über uns</a></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div id="content">
ERROR
</div>
<div id="footer">
Footer
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Twitter</title>
<link rel="stylesheet" href="http://localhost/mvc_tut/public/css/bootstrap.min.css">
<script type="text/javascript" src="http://localhost/mvc_tut/public/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://localhost/mvc_tut/public/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/mvc_tut/views/homescreen/js/homescreen.js"></script>
</script>
</head>
<body>
<div id="header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="http://localhost/mvc_tut/homescreen">Home<span class="sr-only">(current)</span></a></li>
<li><a href="http://localhost/mvc_tut/notifications">Notifications</a></li>
<li><a href="http://localhost/mvc_tut/messages">Messages</a></li>
</ul>
<a class="navbar-brand" href="#">Brand</a>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
<button type="submit" class="btn btn-default">Tweet</button>
</form>
<form class="navbar-form" action="homescreen/logout" method="post">
<button type="submit" class="btn btn-default">Logout</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div id="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-md-4">
<form class="form-control" id="tweetInsert" action="http://localhost/mvc_tut/homescreen/ajaxInsertTweet" method="post">
<textarea name="tweetText" rows="3" cols="40"></textarea>
<button type="submit" name="submitTweet">Tweet</button>
</form>
<div class="row">
<div id="tweet">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
1 answers
solution1
0 2015-10-02 22:27:59
Let me rephrase it a little:
$.getJSON("homescreen/ajaxGetTweets", function(o) {
var h="";
for(var i=0; i<o.length; i++) h+="<div>"+o[i].tweet+"</div>";
$("#tweet").html(h);
});
This way it's better to understand and a lot faster (because you only write the content once, allowing the browser to render it only 1 time). But your version should also have worked; if it didn't, maybe we need to check out the structure of your JSON to see if that field really exists, etc.
If the returned JSON is not an array, for example, maybe you'll need a different for syntax to walk along it.
UPDATE
GrafiCode Studio was right! You should change the "print_r" to a plain "print" when you return the JSON. Didn't spot that one! He should get the points...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.