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

Question

我正在一个项目中，我想使用JSON读取HTML中的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数据。

Answer 1

您有来自PHP页面的JSON响应，但未读取JSON中的PHP。 PHP提供了一个响应，而JSON是该响应的格式。 同样，您现在要在HTML页面中显示数据，而不仅仅是在HTML中读取数据。 如果您记录JSON响应，则会看到它是一个字符串，可以将其解析为包含产品数组的javascript对象，并且每个产品都有menuid，名称，描述，位置。

将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页面（而不是console）的代码即可。

这是一个更新的版本，它将打印到div中（您需要对格式和内容进行分类） https://jsfiddle.net/o1ofnmrL/3/