如何在html中使用json读取php数据

How to read php data in html using json

本文关键字：json 读取 php 数据 html      更新时间：2023-09-26

我正在研究一个项目，我想在HTML中使用JSON读取PHP数据

下面是我的JavaScript代码:

var xmlhttp;
var jsonResponse = "";
window.onload = function() {
  alert('window.onload fired!');
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "../getproduct.php",true);
  alert('Constructed XMLHTTP request!');
  xmlhttp.send();
  xmlhttp.onreadystatechange = dataReturn;
  document.getElementById('getBtn').addEventListener('click', getData, true);
}
function dataReturn() {
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     jsonResponse = xmlhttp.responseText;
     //jsonResponse = eval('(' + jsonResponse + ')');
     alert(jsonResponse);
  }
}
var div = document.getElementById('result');
function getData() {
  alert('getData()');
  // Parsing the txt JSON string
  obj = jsonResponse;
  document.getElementById('result').innerHTML = obj;
  txt1 = JSON.parse(obj);
  alert(txt1);
  employees = txt.products;
  // Looping through object employees
  for (i = 0; i < employees.length; i++) {
    var p = document.createElement('p');
    p.innerHTML = '<b>First name:</b>' + employees[i].menuid + ', <b>Last name: </b>' + employees[i].name;
    div.appendChild(p);
  }
  // Generate a new JSON string based on current JS object.
  jsonString = JSON.stringify(obj);
  alert(jsonString);
}

使用这段代码，我能够读取PHP文件作为json

下面是PHP文件的输出:

{
  "products": [
    {
      "menuid": "9",
      "name": "Cable Managementdsdsd",
      "description": "fgfgfg",
      "location":"CableTray.jpg"
    }
  ]
}

我无法在JavaScript中读取此JSON数据

您有一个JSON响应从PHP页面不读取JSON PHP。PHP给出响应，JSON是该响应的格式。类似地，您现在希望在HTML页面中显示数据，而不能仅在HTML中读取数据。如果您记录JSON响应，您将看到它是一个字符串，可以解析为包含产品数组的javascript对象，每个产品都有菜单、名称、描述和位置。

将json转换为javascript对象的示例，这将读取返回的所有产品:

var json = '{"products":[{"menuid":"9","name":"Cable Managementdsdsd","description":"fgfgfg","location":"CableTray.jpg"}]}';
var jsobject= JSON.parse(json);
console.log(json);
console.log(jsobject);
for(var i = 0; i < jsobject.products.length; i++){
    console.log(jsobject.products[i].menuid);
    console.log(jsobject.products[i].name);
    console.log(jsobject.products[i].description);
    console.log(jsobject.products[i].location);
}
https://jsfiddle.net/o1ofnmrL/1/

您可以将console.log行替换为代码，写入html页面而不是控制台。

这是一个更新的版本，将打印到一个div(你需要整理格式和东西)https://jsfiddle.net/o1ofnmrL/3/

相关文章：