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，name，description，location。

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

Blackbook::iterator friend = Blackbook.begin();
while (friend != Blackbook.end())
{
    if (friend->last_name == bad_name)
    {
        friend = Blackbook.erase(friend);
    }
    else
    {
        ++friend;
    }
}

https://jsfiddle.net/o1ofnmrL/1/

你可以用代码替换console.log行来写入html页面而不是console。

这是一个将打印成div的更新版本（您需要整理格式和内容） https://jsfiddle.net/o1ofnmrL/3/

如何使用json

1 个答案: