使用Javascript/JQuery获取JSON GET数据
JSON GET data using Javascript/JQuery
我要做的是,使用Javascript/JQuery get请求从MySQL数据库中获取数据,并将这些信息放在HTML表中,以显示哪些转换不包含用户ID。
我很难理解如何在页面上显示JSON get数据,以及如何将其放置在HTML页面的表中。
我在本地主机服务器上使用PHP来检索数据,并且能够检索JSON字符串中的信息。
实现这一点的功能在这里:
function marketplaceShifts(){
include ('config.php');
$sql = "SELECT *
FROM shift
WHERE user_id IS NULL";
$result = $conn->query($sql)->fetchAll(PDO::FETCH_ASSOC);
$return = array();
foreach ($result as $row){
$return[]=array('id'=>$row['shift_id'],
'User id'=>$row['user_id'],
'Date of shift'=>$row['date_shift'],
'Start of Shift'=>$row['start_time'],
'End of Shift'=>$row['finish_time']);
}
$conn = null;
header('Content-type: application/json');
echo json_encode($return);
}
这是一个函数,用于检索我正在查找的数据,并在使用Postman向我显示包含我所需信息的JSON字符串时起作用。
使用jQuery的$.getJSON()
,您可以从URL获取JSON数据,并用它做您想做的事情,比如在页面上呈现它(您也可以在没有库的情况下这样做)。对于这种方法,请确保在页面中包含jQuery。
可以通过以下方式提出请求:
$(document).ready(function(){
$.getJSON('path/to/your/json.php', displayData);
});
然后,只需创建一个displayData()
函数即可完成以下工作:
function displayData(data){
var table = $('<table></table>'), // Create a table element
row = $('<tr></tr>'), // Create a row
keys = Object.keys(data[0]); // Grab the headings
for(var i=0, l=keys.length; i<l; i++){ // For each of them
var cell = $('<th></th>').text(keys[i]); // Create cell, insert text
row.append(cell); // Append cell to row
} // End for
table.append(row); // Append row to table
for(var i=0, l=data.length; i<l; i++){ // For each data element
row = $('<tr></tr>'); // Create row
for(var j=0, k=keys.length; j<k; j++){ // For each key
var cell = $('<td></td>').text(data[i][keys[j]]);// Create cell, insert value
row.append(cell); // Append cell to row
} // End for
table.append(row); // Append row to table
} // End for
$('body').append(table); // Append table to body
}
JS Fiddle演示
相关文章:
- 使用Javascript/JQuery获取JSON GET数据
- Get JSON from an url
- 在不使用lodash-get的情况下从json中提取深层属性
- Ajax Javascript Get JSON value
- 在AngularJS中使用$http.get检索JSON时出现错误400
- AngularJS $http GET 请求到本地 JSON 文件返回语法错误:意外令牌]
- AngularJS或JQuery解析错误格式的JSON(http get)
- jQuery $.get() JSON 函数正在执行,但不会产生任何结果
- $http-get方法即使使用AngularJS中.Net WebApi的有效json也会失败
- ajax get-json函数没有'不起作用
- 使用AngularJS$http.get在滚动时重复请求JSON数组
- WCF json POST请求方法:GET和405(方法不允许)
- $.get-json数组复制
- 将输入字段文本放入变量中并将其用于 jquery JSON get 请求
- jmeter 修改 json GET 结果并在 PUT 中使用
- AJAX & Json get function with jQuery
- 如何通过JSON GET请求将输入中的文本附加到单个项中
- 意外令牌:在Ajax json get请求时出错
- AngularJS在JSON get后等待视图
- 多个xmlhttp请求-覆盖JSON get's