js中的意外}令牌 - 试图学习ajax [英] Unexpected } tokens in js - trying to learn ajax

问题描述

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

I'm just trying to learn some ajax so I wrote some code for basically an address book to pull some data. My javascript is rubbish but I cannot seem to understand what I am doing wrong, the error points to function ajaxCall but I see no issue with that function either:

(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开发工具不断给我一个意外令牌第97行上的但这种情况经常发生变化。我在某个地方错过了大括号吗？

The javascript development tools keeps giving me an unexpected token } on line 97 but that changes all so often. Am I missing a curly brace somewhere?

推荐答案

我确实把你的代码放到了这个小提琴并尽可能地修正错误。
你错过了一些花括号和分号。此外，您在声明它们之前使用了 ajaxCall（）和 getHTTPObject（）。看看这个。不幸的是，我不知道问题是否已经修复，但现在代码至少有效：）

I did put your code to this fiddle and fixed the errors as far as i can. You missed some curly braces and semicolons. Also, you used ajaxCall() and getHTTPObject() before they were declared. Check it out. Unfortunately, i dont know if the problem is already fixed, but now the code is valid at least :)

Btw :(在我看来）如此长的代码样本是总是更好地粘贴在小提琴里。这里不仅因为您可以在其他地方引用完整的代码示例时专注于可能混乱的代码，还因为您可以确保没有语法错误，因为您可以在此处提问之前使用jsLint快速验证代码。

Btw: (in my opinion) such long Code-Samples are always better pasted into a fiddle. Not only because you can focus on the probably messy code here while referring to the complete code sample somewhere else, also because you can make sure that there are no syntax-errors as you can quickly validate you code using jsLint before asking the question here.

这篇关于js中的意外}令牌 - 试图学习ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！