JSON从PHP发送数组到Javascript并从数组

时间:2016-12-06 18:05:42

标签: javascript php jquery arrays json

问题是json_encode将我的数组从PHP返回到Javascript。我如何从数组中提取值?

我有简单的connect.php文件:

$questions = $con->prepare("
    SELECT Question, Answer1, Answer2, Answer3
    FROM Questions AS q
    ORDER BY RAND()
    LIMIT 1
"); 
$questions->execute();

$questions->bind_result($question, $answer1, $answer2, $answer3);
$questions->store_result();
$questions->fetch();

$qa = array('question' => $question, 'a1' => $answer1, 'a2' => $answer2, 'a3' => $answer3);

echo json_encode($qa, JSON_UNESCAPED_UNICODE);

它返回以下数据:

{"question":"This is my question?","a1":"test1","a2":"test2","a3":"test3"}

我需要将这些变量传递给index.html到Javascript。

// handles the click event for link 1, sends the query
function getSuccessOutput() {
  getRequest(
      'connect.php', // demo-only URL
       drawOutput,
       drawError
  );
  return false;
}

// handles the click event for link 2, sends the query
function getFailOutput() {
  getRequest(
      'invalid url will fail', // demo-only URL
       drawOutput,
       drawError
  );
  return false;
}

// handles drawing an error message
function drawError () {
    var container = document.getElementById('output');
    container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
    var container = document.getElementById('output');
    container.innerHTML = responseText;   
    $("#btn1").attr('value', responseText[a1]);
    $("#btn2").attr('value', responseText[a2]);
    $("#btn3").attr('value', responseText[a3]);

}
// helper function for cross-browser request object
function getRequest(url, success, error) {
    var req = false;
    try{
        // most browsers
        req = new XMLHttpRequest();
    } catch (e){
        // IE
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            // try an older version
            try{
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                return false;
            }
        }
    }
    if (!req) return false;
    if (typeof success != 'function') success = function () {};
    if (typeof error!= 'function') error = function () {};
    req.onreadystatechange = function(){
        if(req .readyState == 4){
            return req.status === 200 ? 
                success(req.responseText) : error(req.status)
            ;
        }
    }
    req.open("GET", url, true);
    req.send(null);
    return req;
}      

我有id为question的div,我应该从json数组中添加question

我有3个带有ID的按钮:btn1btn2btn3我需要使用a1更改每个按钮的值,{{1来自json数组的{},a2

a3

如果我使用类似的东西:

        <div id="question">

        </div>
        <div class="question-answers">
            <div class="button">
                <input type="button" id="btn1" class="btn" value="">   

                <input type="button" id="btn2" class="btn" value="return getSuccessOutput();">   

                <input type="button" id="btn3" class="btn" value="return getSuccessOutput();">   
                <span id="output" class="output">000</span>
            </div>
        </div>

添加如下文字: var container = document.getElementById('output'); container.innerHTML = responseText;

如何从数组中提取值?像:

{"question":"This is my question?","a1":"test1","a2":"test2","a3":"test3"}

我试图像这样使用,但它不会改变按钮的值:

var q = This is my question;
var a1 = test1;
var a2 = test2;
var a3 = test3

你有想法如何改变吗?

更新

我试图在下面使用,但也没有用过。

    $("#btn1").attr('value', responseText[a1]);
    $("#btn2").attr('value', responseText[a2]);
    $("#btn3").attr('value', responseText[a3]); 

更新2

我也试过这些,但没有奏效(没有发生):

$.getJSON("t.php", function(responseText){
        $.each(responseText, function(i, field){            

       $("#btn1").attr('value', responseText[a1]);
       $("#btn2").attr('value', responseText[a2]);
       $("#btn3").attr('value', responseText[a3]); 

        });
    });

我也试过这个,但同样的问题,没有发生任何事情:

function drawOutput(responseText) {
    alter(this.responseText);
    $.getJSON("t.php", function(responseText){
        $.each(responseText, function(i, field){
            var container = document.getElementById('output');
            var theObject = JSON.parse(responseText);
            container.innerHTML = theObject.a1;         

        });
    });

}

更新3

奇怪,但如果我使用:

function drawOutput(responseText) {
    alter(this.responseText);
    var container = document.getElementById('output');
    var theObject = JSON.parse(responseText);
    container.innerHTML = theObject.a1;  

}

它添加到function drawOutput(responseText) { var container = document.getElementById('output'); container.innerHTML = responseText; } 文字:

output

但如果我在下面使用,则不会发生任何事情:

{"question":"This is my question?","a1":"test1","a2":"test2","a3":"test3"}

0 个答案:

没有答案