Javascript jquery显示从php返回的多个json对象
我知道这个问题有点幼稚,但我找不到解决这个问题的正确方法 我在网站中使用jquery和ajax调用用户搜索功能,php返回json对象 当我使用php文件搜索用户时,如果json返回的只是一个数组,jquery会在屏幕上打印它,但是当返回多个结果时,我不知道如何打印出来 以下是php返回的结果:Javascript jquery显示从php返回的多个json对象,javascript,php,jquery,ajax,json,Javascript,Php,Jquery,Ajax,Json,我知道这个问题有点幼稚,但我找不到解决这个问题的正确方法 我在网站中使用jquery和ajax调用用户搜索功能,php返回json对象 当我使用php文件搜索用户时,如果json返回的只是一个数组,jquery会在屏幕上打印它,但是当返回多个结果时,我不知道如何打印出来 以下是php返回的结果: {"search":"10 junaid saleem junaid@yahoo.com "}{"search":"13 zzz aaa zzz@yahoo.com "} 以下是j
{"search":"10
junaid
saleem
junaid@yahoo.com
"}{"search":"13
zzz
aaa
zzz@yahoo.com
"}
以下是jquery的网页:
<?php
session_start();
require("secure_scripts/getusers.php");
require("secure_scripts/getdp.php");
require("secure_scripts/getusersinfo.php");
if(!isset($_SESSION['id'])){
header("location: index.php");
}else{
$zxcv_lgn = base64_encode($_SESSION['id']);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome <?php echo getusers("first_name"); ?> | Addressbook.com</title>
<script src="jquery.js" type="text/javascript" ></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
$(document).ready(function(){
$("#search_button").click(function(){
$("#search_button").click(function(){ $("#console_loader").hide(); });
$("#console_loader").fadeIn("slow").html("<img src='images/ajax-loader.gif' id='ajax-loader' />");
var send = $("#search").val();
$.ajax({
type: "POST",
url: "secure_scripts/search_users.php",
data: {search: send},
dataType: "json",
success: function(msg){
$("#ajax-loader").fadeOut("slow", function(){
$("#console_loader img").remove();
$("#console_loader").fadeIn("slow").html(msg.search);
});
}
});
});
});
</script>
</head>
<body>
<div id="header">
<p><a href="index.php"><img src="images/header_logo.png" /><span>AddressBook™</span></a></p>
</div>
<div id="wrapper" align="center">
<div id="main">
<div id="content">
<div id="top_nav">
<div class="userinfo"><span class="user_title">Welcome <?php echo getusers("first_name")." ".getusers("last_name"); ?></span></div>
<div class="search">
<form onsubmit="return false" id="search_form">
<input type="text" name="search" class="search_box" id="search" placeholder="Type in to search...">
<input type="button" id="search_button" class="sea" name="search_submit"value="search">
</form>
</div>
</div>
<div id="left_nav">
<div id="dp"><img src="<?php echo getdp(); ?>"></div>
<div class="left_nav_links">Profile</div>
<div class="left_nav_links">Contacts</div>
<div class="left_nav_links">Settings</div>
<div class="left_nav_links">privacy</div>
<div class="left_nav_links">logout</div>
</div>
<div id="console">
<div id="console_top_nav">Your Contacts:</div>
<div id="console_content">
<div id="console_loader" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="links"><ul><li><a href="index.php">Home</a></li><li><a href="about">About</a></li><li><a href="contact">Contact</a></li></ul></div>
<div id="copyrights">© 2014 Addressbook.com All Rights Reserved</div>
</div>
</div>
</body>
</html>
它可以完美地工作,但不能用于多个json对象
提前谢谢 像这样的方法应该会奏效:
$.ajax({
type: "POST",
url: "secure_scripts/search_users.php",
data: {search: send},
dataType: "json",
success: function(msg){
$.each(function() {
$("#ajax-loader").fadeOut("slow", function(){
$("#console_loader img").remove();
$("#console_loader").fadeIn("slow").html(msg.search);
});
});
}
});
我们正在向success函数添加$.each()
方法,以便为返回的每个JSON对象运行它,而不仅仅是第一个JSON对象
供进一步阅读
为清晰起见进行了编辑您需要使用jQuery的
。each()
方法,如下所示:
$(document).ready(function(){
$("#search_button").click(function(){
$("#search_button").click(function(){ $("#console_loader").hide(); });
$("#console_loader").fadeIn("slow").html("<img src='images/ajax-loader.gif' id='ajax-loader' />");
var send = $("#search").val();
$.ajax({
type: "POST",
url: "secure_scripts/search_users.php",
data: {search: send},
dataType: "json",
success: function (msg) {
$.each(function (index, item) {
$("#ajax-loader").fadeOut("slow", function () {
$("#console_loader img").remove();
$("#console_loader").fadeIn("slow").html(item.search);
});
});
}
});
});
});
因此,通过使用$.each()
在集合中循环并返回值(索引,项)
,您可以通过如下方式引用对象的值:
$("#console_loader").fadeIn("slow").html(item.search);
因为json返回的是JavaScript对象文本。您确定返回的是有效的json吗?您应该将
json_encode()
和echo
结果放在末尾一次(例如,一个包含所有您想要返回的内容的数组),而不是多次。在success
函数中,尝试将整个响应放在$中。每个都将为每个响应运行函数,不仅仅是第一次+1@CodyReichert-$。each()将循环遍历json对象,并允许您处理每个对象,而不是仅返回第一个对象。如果json作为对象数组接收,我建议使用$.each(函数(索引,项){}并通过item.search访问对象,而不是使用msg.search。我不知道如何使用它,请您指导我好吗@HowardRenollet@JunaidSaleem-我已经发布了一个更详细的解释作为答案。如果您有任何其他问题或需要进一步帮助,请告诉我。好的,我已经尝试了您发布的链接,并将该方法应用于我的脚本,但我得到了错误:Uncaught TypeError:无法读取未定义的属性'length'。在这一行:$。每个(结果['Users',函数(key,val){好的,mr@CodyReicher感谢你给我指明了正确的方法,我发现了错误,错误是:$。每个(结果['Users',函数(key,val),,,应该是这样->:$。每个(results.Users,function(key,val),再次感谢您的帮助:)
[{"search":"10
junaid
saleem
junaid@yahoo.com
"}{"search":"13
zzz
aaa
zzz@yahoo.com
"}]
$("#console_loader").fadeIn("slow").html(item.search);