Question

我正在编写自定义javascript代码（不是jQuery）来处理ajax请求的响应，以将给定名称与数据库名称匹配（名称建议）。我不想为这种工作使用预先构建的插件，因为我希望能够灵活地进行未来的修改。

ajax响应具有以下形式（JSON数组）

[{"ID":"ID1","name":"name1"},{"ID":"ID2","name":"name2"}]

我将向您展示以下代码示例以说明我当前的问题：

var response = xmlhttp.responseText;
var result = JSON.parse(response);
var number = result.length;
//box for namesuggestions 
var root = document.getElementById('namebox');
var list = document.createElement("ul");
for (var i=0;i<number;i++) {
            var element = document.createElement('li');
            element.onclick=function() {fillName(this.childNodes[0].nodeValue,this.childNodes[1].value);};
            //hidden input field for storage of ID
            var eInput = document.createElement('input');
            eInput.type = 'hidden';
            eInput.value = result[i].ID;
            //text field for storage of name
            var textElement = document.createTextNode(result[i].name);
            element.appendChild(textElement);
            element.appendChild(eInput);
            list.appendChild(element);              
}
root.appendChild(list);

我的根元素是名称框，我在新创建的“ul”元素中显示找到的名称建议列表。列表条目在for循环中创建。 fillName函数会将所选名称填入相应的input HTML标记，该标记用于ajax搜索。我的问题是以简单的方式将选定的ID和name转移到fillName函数。正如您所看到的，我现在正在使用隐藏字段进行ID存储。要访问name我使用this.childNodes[0].nodeValue和ID this.childNodes[1].value。

您是否知道将多个值传递给事件处理程序调用的函数的更好方法，可能不使用隐藏字段或其他html元素？由于某些原因，我不明白element.onclick=function() {fillAuthor(result[i].name,result[i].ID);};不起作用。

提前感谢您的帮助。

Answer 1

使用这样的值将不起作用，因为在调用click事件处理程序时，for循环已完成且i = 2并且没有结果[2]。

尝试这样做：http://jsfiddle.net/m8hwg/

var response = '[{"ID":"ID1","name":"name1"},{"ID":"ID2","name":"name2"}]';
var result = JSON.parse(response);
var number = result.length;
//box for namesuggestions 
var root = document.getElementById('namebox');
var list = document.createElement("ul");
for (var i=0;i<number;i++) {
            var element = document.createElement('li');
            element.onclick=function(res) {
                return function() {
                    console.log(res.name + ', ' + res.ID);
                }
            }(result[i]);
            //text field for storage of name
            var textElement = document.createTextNode(result[i].name);
            element.appendChild(textElement);
            list.appendChild(element);              
}
root.appendChild(list);

我将fillAuthor切换为console.log，因为我不知道fillAuthor会做什么。

将多个ajax结果值传递给事件处理程序调用的函数

1 个答案: