使用 PHP 将 JSON 数据填充到文本区域中

Question

如果有人能帮助我，那就太好了。我遇到的问题是，我无法使用 PHP 创建 JSON 对象，其中数据是从 MySQL 表中获取的。“角色”表有一个主键“role_id”。这个字段是下拉框中的一个选项。一旦用户选择其中一个值，按下“选择角色”按钮，与该值相关的数据（例如背景、资格）需要填充到下面的文本区域中。目前，一旦按钮被选中按下后，每个文本区域中将显示“未定义”一词，而不是所需的数据。

我遇到了什么问题？非常感谢您的帮助。

编辑 - 数据现在填充在文本区域中，但在“knowledge_and_skills”和“prof_dev_activities”中存在未定义的错误。此外，现在仅填充“角色”表中的第一条记录 - 因此在下拉框中选择值并更改值时对于“role_id”-什么也没有发生。

<?php

header("Content-type: application/json");

$host="localhost"; // Host name 
$username="root"; // Mysql username 
$password=""; // Mysql password 
$db_name="bcs_test"; // Database name 

// Connect to server and select database.
mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");


$result = mysql_query("SELECT * FROM role");
$obj = mysql_fetch_object($result);

$json = json_encode($obj);

echo ($json);
?>

CREATE TABLE role (
  role_id INTEGER(5) UNSIGNED NOT NULL AUTO_INCREMENT,
  background VARCHAR(5000) NULL,
  tasks VARCHAR(5000) NULL,
  knowledge VARCHAR(5000) NULL,
  training VARCHAR(5000) NULL,
  professional VARCHAR(5000) NULL,
  qualifications VARCHAR(5000) NULL,
  PRIMARY KEY(role_id)
)

Answer 1

// Creating stubs for console if it don't exist.
// Can be used for logging to the Chrome JavaScript console.
if (!window.console) {
    console = {};
}

console.log = console.log || function() {};
console.warn = console.warn || function() {};
console.error = console.error || function() {};
console.info = console.info || function() {};

///////////////////////////////////////////////////////////////////////////////////


var function1 = new Array();

function1['Systems Development and Maintenance'] = new Array('Applications Support','Business Analysis','Data Analysis','Database Design', 'Documentation/Technical Authoring','Porting/Software Integration','Programming/Software Creation','Safety Engineering','Software Engineering','Systems Design','Systems Integration','Software Testing','Web Site Specialism');
function1['Service Delivery'] = new Array('Computer Operations','Database Administration','Hardware/Software Installation','Help Desk','Installation and Implementation','Network Administration and Support','Network Operations','Service Level Monitoring','User Support'); 
function1['Technical Advice and Consultancy'] = new Array('System Ergonomics Evaluation');
function1['Quality'] = new Array('Quality Standards');
function1['Customer Relations'] = new Array('Marketing','Sales Support'); 
function1['Education and Training'] = new Array('Education and Training Delivery');
function1['Support and Administration'] = new Array('Change Management','Configuration Management','Project Office','Security Administration');



var rolelevel = new Array();

rolelevel['Systems Development and Maintenance'] = new Array();
rolelevel['Systems Development and Maintenance']['Applications Support'] = new Array('ASUP1','ASUP2');
rolelevel['Systems Development and Maintenance']['Business Analysis'] = new Array('ANAL2');
rolelevel['Systems Development and Maintenance']['Data Analysis'] = new Array('DTAN1','DTAN2');
rolelevel['Systems Development and Maintenance']['Database Design'] = new Array('DBDS1','DBDS2');
rolelevel['Systems Development and Maintenance']['Documentation/Technical Authoring'] = new Array('DOCM1','DOCM2');
rolelevel['Systems Development and Maintenance']['Porting/Software Integration'] = new Array('PORT2'); 
rolelevel['Systems Development and Maintenance']['Programming/Software Creation'] = new Array('PROG1','PROG2');
rolelevel['Systems Development and Maintenance']['Safety Engineering'] = new Array('SFEN2');
rolelevel['Systems Development and Maintenance']['Software Engineering'] = new Array('SENG1','SENG2');
rolelevel['Systems Development and Maintenance']['Systems Design'] = new Array('DESN2');
rolelevel['Systems Development and Maintenance']['Systems Integration'] = new Array('SIST1','SIST2');
rolelevel['Systems Development and Maintenance']['Software Testing'] = new Array('TEST1','TEST2');
rolelevel['Systems Development and Maintenance']['Web Site Specialism'] = new Array('WBSP1','WBSP2');

rolelevel['Service Delivery'] = new Array();
rolelevel['Service Delivery']['Computer Operations'] = new Array('COPS0','COPS1');
rolelevel['Service Delivery']['Database Administration'] = new Array('DBDS1','DBDS2');
rolelevel['Service Delivery']['Hardware/Software Installation'] = new Array('HSIN1','HSIN2');
rolelevel['Service Delivery']['Help Desk'] = new Array('HELP0','HELP1','HELP2');
rolelevel['Service Delivery']['Installation and Implementation'] = new Array('INIM1','INIM2');
rolelevel['Service Delivery']['Network Administration and Support'] = new Array('NTAS2');
rolelevel['Service Delivery']['Network Operations'] = new Array('NTOP0','NTOP1','NTOP2');
rolelevel['Service Delivery']['Service Level Monitoring'] = new Array('SLMO2');
rolelevel['Service Delivery']['User Support'] = new Array('USUP1','USUP2');









rolelevel['Technical Advice and Consultancy'] = new Array();
rolelevel['Technical Advice and Consultancy']['System Ergonomics Evaluation'] = new Array('HCEV2');

rolelevel['Quality'] = new Array();
rolelevel['Quality']['Quality Standards'] = new Array('QUST1','QUST2');

rolelevel['Customer Relations'] = new Array();
rolelevel['Customer Relations']['Marketing'] = new Array('MKTG2');
rolelevel['Customer Relations']['Sales Support'] = new Array('SSUP1','SSUP2');

rolelevel['Education and Training'] = new Array();
rolelevel['Education and Training']['Education and Training Delivery'] = new Array('ETDL2');

rolelevel['Support and Administration'] = new Array();
rolelevel['Support and Administration']['Change Management'] = new Array('CHMG2');
rolelevel['Support and Administration']['Configuration Management'] = new Array('CFMG2');
rolelevel['Support and Administration']['Project Office'] = new Array('PROF2');
rolelevel['Support and Administration']['Security Administration'] = new Array('SCAD2');




function setFunction() {
  functiongSel = document.getElementById('function_grouping');
  rolelevelList = function1[functiongSel.value];
  changeSelect('role_level', rolelevelList, rolelevelList);
  setRoleLevel();
}

function setRoleLevel() {
  functiongSel = document.getElementById('function_grouping');
  functionSel = document.getElementById('role_level');
  functionList = rolelevel[functiongSel.value][functionSel.value];
  changeSelect('function2', functionList, functionList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}


function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setFunction();
});




function select_role ()
{
    var roleLevel = get_role_level();
    console.info("Role level is " + roleLevel + ".");

    var role = request_role_object(roleLevel);
}

function reset_role_fields(role)
{
    console.log("Filling textboxes for the role level " + role.level + ".");
    set_background(role.background);
    set_tasks(role.tasks);
    set_knowledge_and_skills(role.knowledge_and_skills);
    set_training(role.training);
    set_prof_dev_activities(role.prof_dev_activities);
    set_qualifications(role.qualifications);
}

// A fake-function for testing
function request_role_object (level)
{
    console.warn("Faking role object");

    return JSON.parse(JSON.stringify(
        {
            level: level,
            background: "The dark background.",
            tasks: "No tasks for now.",
            knowledge_and_skills: "Great knowledge and skills!",
            training: "Some training.",
            prof_dev_activities: "Nagging.",
            qualifications: "Google for qualifications."
        }));
}

var obj;

function process_change() {
    // 4 means the response has been returned and ready to be processed
    if (obj.readyState == 4) {
        // 200 means "OK"
        if (obj.status == 200) {
            // process whatever has been sent back here:

            var role_json = this.responseText;
            console.log("Role object in JSON format: " + role_json);
            reset_role_fields(JSON.parse(role_json));

        } else {
            alert("There was a problem in the returned data:\n");
        }
    }
}

function request_url(url) {
  // native  object

  if (window.XMLHttpRequest) {
    // obtain new object
    obj = new XMLHttpRequest();
    // set the callback function
    obj.onreadystatechange = process_change;
    // we will do a GET with the url; "true" for asynch
    obj.open("GET", url, true);
    // null for GET with native object
    obj.send(null);
  // IE/Windows ActiveX object
  } else if (window.ActiveXObject) {
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    if (obj) {
      obj.onreadystatechange = processChange;
      obj.open("GET", url, true);
      // don't send null for ActiveX
      obj.send();
    }
  } else {
    alert("Your browser does not support AJAX");
  }
}

function request_role_object (level)
{
    console.log("Requesting role with level " + level + ".");

    //
    // Change `some-role.json' to the role.php,
    // that will select a row from the table with the `level' specified
    // and return that data in JSON format (google about JSON and see
    // `some-role.json' for example.
    // 

     //var role_cgi = "some-role.json";
        var role_cgi = "role_select.php";
   request_url(role_cgi + "?" + "level=" + level);
}





function get_role_level ()
{
    var role = document.roleForm.function2.value;

    if (0 == role.length)
    {
        console.warn("Role is unknown.");
    }

    return role;
}

function set_background (newValue)
{
    var field = document.roleForm.backgroundtext;
    field.value = newValue;
}

function set_tasks (newValue)
{
    var field = document.roleForm.taskstext;
    field.value = newValue;
}

function set_knowledge_and_skills (newValue)
{
    var field = document.roleForm.knowledgetext;
    field.value = newValue;
}

function set_qualifications (newValue)
{
    var field = document.roleForm.qualtext;
    field.value = newValue;
}

function set_prof_dev_activities (newValue)
{
    var field = document.roleForm.professionaltext;
    field.value = newValue;
}

function set_training (newValue)
{
    var field = document.roleForm.trainingtext;
    field.value = newValue;
}