来自HTML表单的JavaScript onSubmit问题

时间:2014-06-11 18:25:52

标签: javascript json xmlhttprequest

这可能是我代表的一个非常简单的疏忽,但我无法通过以下方式来运行。

我在按下表单元素中的按钮时触发此功能。如果我在getData()函数之外运行它,它可以正常工作(使用手动编码的URL),但尝试运行该函数不起作用。

有人可以看看这个并告知我可能出错的地方吗?

function getData(form) {
    var url = '/service/search/' + form.date.value;
    var getStats = new XMLHttpRequest();
    getStats.open('GET', url, true);
    getStats.onload = function() {
        if (getStats.status = 200) {
            //Add JSON to "data"
            var data = JSON.parse(getStats.responseText);
            var list = '';
            if (data.length > 0) {
                document.getElementById('results').innerHTML += '<tr><th>&nbsp;</th><th>Start</th><th>End</th><th>Title</th><th>&nbsp;</th></tr>'
            }
            for (var i = 0; i < data.length; i++) {
                list += '<tr data-state="'+data[i].state+'" class="'+data[i].type+'-item"><td class="crm-'+data[i].state+'"></td><td>'+data[i].start+'</td><td>'+data[i].end+'</td><td>'+data[i].title+'</td><td><a href="xxxxxxxx'+data[i].id+'" target="_blank">View</a></td>';
            }
            //document.getElementById('results').innerHTML += list;
            console.log(list);
        } else {
            console.error('HTTP ERROR: ' + getStats.status);
        }
    };
    getStats.onerror = function() {
        console.error('ERROR');
    };
    getStats.send();
}

更新 根据要求,这就是我调用函数的方式:

<form onsubmit="getData(this);">
     <input type="text" placeholder="YYYY-MM-DD" id="date">
     <input type="submit" value="Search">
</form>

关于何时正常工作,如果我在函数下面运行它,它可以工作:

var url = '/service/search/2014-06-11';
var getStats = new XMLHttpRequest();
getStats.open('GET', url, true);
getStats.onload = function() {
    if (getStats.status = 200) {
        //Add JSON to "data"
        var data = JSON.parse(getStats.responseText);
        var list = '';
        if (data.length > 0) {
            document.getElementById('results').innerHTML += '<tr><th>&nbsp;</th><th>Start</th><th>End</th><th>Title</th><th>&nbsp;</th></tr>'
        }
        for (var i = 0; i < data.length; i++) {
            list += '<tr data-state="'+data[i].state+'" class="'+data[i].type+'-item"><td class="crm-'+data[i].state+'"></td><td>'+data[i].start+'</td><td>'+data[i].end+'</td><td>'+data[i].title+'</td><td><a href="xxxxxxxx'+data[i].id+'" target="_blank">View</a></td>';
        }
        //document.getElementById('results').innerHTML += list;
        console.log(list);
    } else {
        console.error('HTTP ERROR: ' + getStats.status);
    }
};
getStats.onerror = function() {
    console.error('ERROR');
};
getStats.send();

0 个答案:

没有答案