我使用jquery和getJSON来获取由PHP构造的数据提要。在访问PHP页面时，Feed显示良好。我遇到的问题是，JSON feed作为多个对象返回时，它是在jQuery GET请求，我不知道如何编写jQuery来显示所有对象和他们的数据。
jQuery:$(document).ready(function () {
$("#display_results").hide();
$("#searchButton").click(function (event) {
$("#display_results").show();
event.preventDefault();
search_ajax_way();
});
$("#search_results").slideUp();
$("#searchBox").keyup(function (event) {
$("#display_results").show();
});
});
function search_ajax_way() {
//var search_this=$("#searchBox").val();
//$.post("http:/url.com/folder/cl/feed.php", {city : search_this}, function(data){
//$("#display_results").html(data);
//});
var search_this = $("#searchBox").val();
$.getJSON('http://url.com/app/cl/disp_byowner_feed.php', {
city: search_this
}, function (result) {
$.each(result, function (i, r) {
console.log(r.seller);
window.title = r.title;
window.seller = r.seller;
window.loc = r.location;
(Plan on listing all keys listed in the data feed below here)
});
console.log(result);
$("#display_results").html(window.seller + < need to list all keys / values here > );
});
}
PHP(构造JSON Feed):
$city = 'Kanosh';
$s = "SELECT * FROM `list` WHERE `city` LIKE '%".$city."%'";
$res = $mysqli->query($s) or trigger_error($mysqli->error."[$s]");
$a = array();
while($row = $res->fetch_array(MYSQLI_BOTH)) {
$a[] = array(
'title' => $row['title'],
'price' => $row['price'],
'rooms' => $row['rooms'],
'dimensions' => $row['dimensions'],
'location' => preg_replace('pic'u00a0map', '', $row['location']),
'price' => $row['price'],
'address' => $row['address'],
'seller' => $row['seller'],
'href' => $row['href'],
'date' => $row['date']
);
}
header('Content-Type: application/json');
echo json_encode($a);
$res->free();
$mysqli->close();
JSON Feed示例:
[{
"title": "Great Ski-In Location with Seller Financing Available ",
"price": " (Park City near the Resort) ",
"rooms": "",
"dimensions": "",
"location": "",
"address": "Crescent Road at Three Kings Dri",
"seller": "real estate - by owner",
"href": "http:'/'/saltlakecity.craigslist.org",
"date": "20140811223115"
}, {
"title": "Prospector Building 1 - Tiny Condo, Great Location - Owner Financing",
"price": "$75000",
"rooms": false,
"dimensions": "",
"location": " Prospector Square Park City Ut",
"address": "",
"seller": "real estate - by owner",
"href": "http:'/'/saltlakecity.craigslist.org",
"date": "20140811223115"
}]
您的输出是一个JSON对象数组。幸运的是，JavaScript可以方便地操作JSON(实际上，这就是创建JSON的原因…)，jQuery可以方便地操作DOM。
要解析结果，只需遍历该Array，在Array中构造所需的任何HTML字符串，然后使用jQuery将其插入DOM。
下面是一个简单的列表示例:
var html = "";
for (var i = 0; i < result.length; i++) { //assuming result in the JSON array
html += '<ul id = 'house_' + i>';
for (var property in result[i]) { //read all the object properties
html += '<li>' + property + ' : ' + result[i][property] + '</li>';
}
html += '</ul>';
};
$("whatever_div").html(html);
如果您只想显示某些属性，您可以单独读取它们并进行额外的格式化(例如日期)。为不同的HTML对象提供与其所代表的内容相对应的id也很有用。
function search_ajax_way(){
//var search_this=$("#searchBox").val();
//$.post("http:/url.com/folder/cl/feed.php", {city : search_this}, function(data){
//$("#display_results").html(data);
//});
var search_this=$("#searchBox").val();
$.getJSON('http://hooley.me/scraper/cl/disp_byowner_feed.php', { city : search_this }, function(result) {
var output = '';
$.each(result, function(i,r) {
output+= r.title + " " + r.seller
});
$("#display_results").html(output);
});
}