0

我只是想学习一些ajax，所以我为基本上一个地址簿编写了一些代码来提取一些数据。我的 javascript 是垃圾，但我似乎无法理解我做错了什么，错误指向函数 ajaxCall 但我认为该函数也没有问题：

(function () {
    var searchForm = document.getElementById("search-form"),
        searchField = document.getElementById("q"),
        getAllButton = document.getElementById("get-all"),
        target = document.getElementById("output");

    var addr = {
        search: function (event) {
            var output = document.getElementById("output");

            //start ajax call
            ajaxCall("data/contacts.json", output, function (data) {
                var searchValue = searchField.value,
                addrBook = data.addressBook,
                count = addrBook.length,
                i;

                //stop default behavior
                event.preventDefault();

                //clear target
                target.innerHTML = "";

                if (count > 0 && searchValue !== "") {
                    for (i = 0; i < count; i++) {
                        var obj = addrBook[i],
                            isItFound = obj.name.indexOf(searchValue);
                        if (isItFound !== -1) {
                            target.innerHTML += '<p>' + obj.name + ', <a href="mailto:' + obj.email + '">' + obj.email + '</a><p>';
                        } //end if isItFound
                    } //end for loop
                } //end if count check
            }); //end ajax call
        }, //end method search

        getAllContacts: function () {
            var output = document.getElementById("output");
            ajaxCall("data/contacts.json", output, function (data) {
                var addrBook = data.addressBook,
                        count = addrBook.length,
                        i;

                target.innerHTML = "";

                if (count > 0) {
                    for (i = 0; i < count; i++) {
                        var obj = addrBook[i];
                        target.innerHTML += '<p>' + obj.name + ', <a href="mailto:' + obj.email + '">' + obj.email + '</a><p>';
                    } //end for loop
                } //end if
            }); //end ajax call
        }, //end method getAllContacts
        setActiveSection: function () {
            this.parentNode.setAttribute("class", "active");
        }, //end method setActiveSection
        removeActiveSection: function () {
            this.parentNode.removeAttribute("class");
        }, //end method removeActiveSection
        addHoverClass: function () {
            searchForm.setAttribute("class", "hovering");
        }, //end method addHoverClass
        removeHoverClass: function () {
            searchForm.removeAttribute("class");
        } //end method removeHoverClass
    }   //end addr object  
    searchField.addEventListener("keyup", addr.search, false);
    searchField.addEventListener("focus", addr.addActiveSection, false);
    searchField.addEventListener("blur", addr.removeActiveSection, false);
    getAllButton.addEventListener("click", addr.getAllContacts, false);
    searchForm.addEventListener("submit", addr.search, false);
    searchForm.addEventListener("mouseover", addr.addHoverClass, false);
    searchForm.addEventListener("mouseout", addr.removeHoverClass, false);
})(); //end anon function

function getHTTPObject() {
    var xhr;

    //in most cases this first if is executed
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    //otherwise support crappy IE6 and below
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    return xhr;
}

function ajaxCall(dataUrl, outputElement, callback) {
    //get ajax object
    var request = getHTTPObject();

    outputElement.innerHTML = "Loading...";
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            //good ajax response..now save it
            var contacts = JSON.parse(request.responseText);
                if (typeof callback === "function")
                    callback(contacts);
        }   //end upper if
    }   //end onreadystatechange

    request.open("GET", dataUrl, true);
    request.send(null);
}

javascript 开发工具一直给我一个unexpected token }在线 97 行，但这种情况经常发生变化。我在某处缺少花括号吗？

4

2 回答 2

1

您必须在控制台中重新检查您的 JSON 响应是什么，并查看它是否无效。因为在第 97 行，您说您正在解析响应。

于 2012-11-13T21:19:10.017 回答
1

我确实将您的代码放到了这个小提琴中，并尽我所能修复了错误。你错过了一些花括号和分号。另外，您在声明它们之前使用了ajaxCall()和。getHTTPObject()看看这个。不幸的是，我不知道问题是否已经解决，但现在代码至少是有效的:)

顺便说一句：（在我看来）这么长的代码示例总是最好粘贴到小提琴中。不仅因为您可以在此处关注可能混乱的代码，同时在其他地方参考完整的代码示例，还因为您可以确保没有语法错误，因为您可以在此处提问之前使用 jsLint 快速验证您的代码。

于 2012-11-14T07:30:07.183 回答