Question

下面是一些示例JSON信息。我希望使用来自pullData变量的vanilla javascript在表中显示此信息，但在单击“加载数据”按钮之前显示数据。

{"id":6,"gender":"F","first_name":"Dorothy","last_name":"Watkins","email":"dwatkins5@elpais.com","active":false,"title":"Structural Analysis Engineer"},
{"id":7,"gender":"F","first_name":"Norma","last_name":"Johnston","email":"njohnston6@blogger.com","active":true,"title":"Help Desk Operator"},
{"id":8,"gender":"M","first_name":"Joe","last_name":"Andrews","email":"jandrews7@slashdot.org","active":true,"title":"VP Accounting"},
{"id":9,"gender":"M","first_name":"Jason","last_name":"Bryant","email":"jbryant8@oracle.com","active":true,"title":"VP Product Management"},
{"id":10,"gender":"F","first_name":"Kimberly","last_name":"Fox","email":"kfox9@time.com","active":true,"title":"Environmental Tech"},

下面我评论了getData.addEventListener，因为当它是onClick()时，它似乎不会调用JSON数据，而当它是onLoad()时，数据会立即发送。我错过了什么？

var pullData = document.getElementById("load").addEventListener('click',parseData);
        var reset = document.getElementById("reset").addEventListener('click',resetData);
        var dataURL= "./surveyData.php";

        var getData = new XMLHttpRequest();
    //  getData.addEventListener('load',parseData); 
        getData.open('GET', dataURL);
        getData.send();

        function parseData(getEvent){
            alert("test");
            var myArray= JSON.parse(getEvent.target.responseText);
            var output="";

            for(i in myArray){
            output+= '<tr><td>' + myArray[i].id + '</td><td>' + myArray[i].gender + '</td><td>' + myArray[i].first_name + '</td><td>' + myArray[i].last_name + '</td><td>' + myArray[i].email + '</td><td>' + myArray[i].active + '</td><td>' + myArray[i].title + '</td></tr>';
            }
            output +="</table>";
            document.getElementById("grabby").innerHTML ="<table width=\"100%\" ><tr><td>ID</td><td>Gender</td><td>First Name</td><td>Last Name</td><td>E-Mail</td><td>Active</td><td>Title</td>" + output;

            document.getElementById("reset").disabled=false;
            document.getElementById("load").disabled=true;
        }

        function resetData(){
            document.getElementById("grabby").innerHTML ="<table width=\"100%\" ><tr><td>ID</td><td>Gender</td><td>First Name</td><td>Last Name</td><td>E-Mail</td><td>Active</td><td>Title</td>";

            document.getElementById("reset").disabled=true;
            document.getElementById("load").disabled=false;
        }

（请不要告诉我Jquery：））

Answer 1

点击后发送请求并在回复后显示数据

document.getElementById('load').addEventListener('click', getAndShowData);
document.getElementById('reset').addEventListener('click', resetData);
var dataURL = './surveyData.php';

function getAndParseData() {
    var getData = new XMLHttpRequest();
    getData.addEventListener('load', showData);
    getData.open('GET', dataURL);
    getData.send();
}

function showData(getEvent) {
    alert('test');
    var myArray = JSON.parse(getEvent.responseText);
    var output = '';

    for (i in myArray) {
        output += '<tr><td>' + myArray[i].id + '</td><td>' + myArray[i].gender + '</td><td>' + myArray[i].first_name + '</td><td>' + myArray[i].last_name + '</td><td>' + myArray[i].email + '</td><td>' + myArray[i].active + '</td><td>' + myArray[i].title + '</td></tr>';
    }
    output += '</table>';
    document.getElementById('grabby').innerHTML = '<table width="100%"><tr><td>ID</td><td>Gender</td><td>First Name</td><td>Last Name</td><td>E-Mail</td><td>Active</td><td>Title</td>' + output;

    document.getElementById('reset').disabled = false;
    document.getElementById('load').disabled = true;
}

function resetData() {
    document.getElementById('grabby').innerHTML = '<table width="100%" ><tr><td>ID</td><td>Gender</td><td>First Name</td><td>Last Name</td><td>E-Mail</td><td>Active</td><td>Title</td>';

    document.getElementById('reset').disabled = true;
    document.getElementById('load').disabled = false;
}

在Ajax Call中单击vs Load？

1 个答案: