jquery - AJAX, PHP returning undefined or nothing -
i have 3 files.
1.) file displaying it
<div id="tweet"> </div> this should displayed.
2.)the php file gets data database
function ajaxgettweets() { $stmtselecttweets = $this->db->prepare('select * tweets'); $stmtselecttweets->setfetchmode(pdo::fetch_assoc); $stmtselecttweets->execute(); $data = $stmtselecttweets->fetchall(); print_r(json_encode($data)); } this function return result in json, got right format when use print_r
3.) js file ajax
$( document ).ready(function() { $.get("homescreen/ajaxgettweets", function( o ) { for(var = 0; < o.length; i++) { $("#tweet").append("<div>"+o[i].tweet+"</div>"); } }, "json"); }); when leaving "json" @ end of $.get function got result in div undefined, when using "json", got nothing.
in console got warning like:
synchronous xmlhttprequest on main thread deprecated because of detrimental effects end user's experience. 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 , toggle grouped 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 nav links, forms, , other content 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 , toggle grouped 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 nav links, forms, , other content 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>
let me rephrase 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 understand , lot faster (because write content once, allowing browser render 1 time). version should have worked; if didn't, maybe need check out structure of json see if field exists, etc.
if returned json not array, example, maybe you'll need different for syntax walk along it.
update
graficode studio right! should change "print_r" plain "print" when return json. didn't spot one! should points...
Comments
Post a Comment