2

次の javascript/ajax コードに問題があります。このコードは、連絡先の名前と電子メール アドレスが含まれているだけの JSON ファイルを検索します。「keyup」イベントが addr.search を呼び出すと、すべて問題なく、ajaxCall の関数呼び出しで属性 request.readyState=4 および request.Status=200 が呼び出されますが、「submit」イベントが同じ addr を呼び出して同じ検索を呼び出すと。検索機能 request.status が 0 で失敗します。
フォーム要素のアクション属性と関係がある可能性はありますか?
これを WAMP サーバーで実行していることを付け加えておきます。

/* standard Ajax xhr function */

function getHTTPObject() {

var xhr;

if (window.XMLHttpRequest) { // check for support

    // if it's supported, use it 
    xhr = new XMLHttpRequest();

} else if (window.ActiveXObject) { // check for the IE 6 Ajax

    // save it to the xhr variable
    xhr = new ActiveXObject("Msxml2.XMLHTTP");

}

// spit out the correct one so we can use it
return xhr;
}

/* define the Ajax call */

function ajaxCall(dataUrl, outputElement, callback) {

/* use our function to get the correct Ajax object based on support */
var request = getHTTPObject();

outputElement.innerHTML = "Loading";

request.onreadystatechange = function() {

    // check to see if the Ajax call went through
    if ( request.readyState === 4 && request.status === 200 ) {

        // save the ajax response to a variable
        var contacts = JSON.parse(request.responseText);

        // make sure the callback is indeed a function before executing it
        if(typeof callback === "function"){

            callback(contacts);

        } // end check

    } // end ajax status check

} // end onreadystatechange

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

}

/* wrap everything in an anonymous function to contain the variables */

(function(){

/* define the DOM elements and common variables you'll need */
var searchForm = document.getElementById("search-form"),
    searchField = document.getElementById("q"),
    getAllButton = document.getElementById("get-all"),
    target = document.getElementById("output");

/* define address book methods */
var addr = {

    search : function(event){

        // set the output element
        var output = document.getElementById("output");

         ajaxCall('data/contacts.json', output, function (data) {

            // save the input value, contacts length and i to variables
            var searchValue = searchField.value,
                addrBook = data.addressBook,
                count = addrBook.length,
                i;

            // stop the default behavior
            event.preventDefault();

            // clear the target area just incase there's something in it.
            target.innerHTML = "";

            // check the count, of course
            if(count > 0 && searchValue !== ""){

                // loop through the contacts
                for(i = 0; i < count; i = i + 1) {

                    // look through the name value to see if it contains the searchterm string
                    var obj = addrBook[i],
                        isItFound = obj.name.indexOf(searchValue);

                    // anything other than -1 means we found a match
                    if(isItFound !== -1) {
                        target.innerHTML += '<p>' + obj.name + ', <a href="mailto:' + obj.email + '">'+ obj.email +'</a><p>';
                    } // end if

                } // end for loop

            } // end count check

        }); // end ajax call

    },
    getAllContacts : function () {

        // set the output element
        var output = document.getElementById("output");

        // start Ajax call
        ajaxCall('data/contacts.json', output, function (data) {

            var addrBook = data.addressBook,
                count = addrBook.length,
                i;

            // clear the target area just incase there's something in it.
            target.innerHTML = "";

            // check the count, of course
            if(count > 0) {

                // loop through the contacts
                for(i = 0; i < count; i = i + 1) {

                    // look through the name value to see if it contains the searchterm string
                    var obj = addrBook[i];

                    target.innerHTML += '<p>' + obj.name + ', <a href="mailto:' + obj.email + '">'+ obj.email +'</a><p>';

                } // end for loop
            } // end count check

        }); // end ajax call
    },
    setActiveSection : function() {

        // add a class of "active" the wrapping div
        this.parentNode.setAttribute("class", "active");

    },
    removeActiveSection : function() {

        // remove the class from the wrapping div
        this.parentNode.removeAttribute("class");

    },
    addHoverClass : function() {

        // remove the class from the wrapping div
        searchForm.setAttribute("class", "hovering");

    },
    removeHoverClass : function(){

        // remove the class from the wrapping div
        searchForm.removeAttribute("class");

    }

} // end addr object

// activate auto complete on keyUp
searchField.addEventListener("keyup", addr.search, false);

// set active section on focus of the form field
searchField.addEventListener("focus", addr.setActiveSection, false);

// remove active section on blur of the form field
searchField.addEventListener("blur", addr.removeActiveSection, false);

// get all contacts when you click the button
getAllButton.addEventListener("click", addr.getAllContacts, false);

// add hover class on mouse over of the form field
searchForm.addEventListener("mouseover", addr.addHoverClass, false);

 // remove hover class on mouse out of the form field
searchForm.addEventListener("mouseout", addr.removeHoverClass, false);

// activate search on form submit
searchForm.addEventListener("submit", addr.search, false);


})(); // end anonymous function

ここにhtmlがあります

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Address Book Application</title>
<style>
    .active { background:#ddd; }
    .hovering { background:#eee; }
    form > div { padding:10px; }
</style>

</head>
<body>

<h1>Address Book</h1>

<form action="" method="get" id="search-form">

<div>
    <label for="q">Search address book</label>
    <input type="search" id="q" name="q" required placeholder="type a name" autocomplete="off">
</div>

<div class="button-group">
    <button type="submit" id="search-btn">search</button>
    <button type="button" id="get-all">get all contacts</button>
</div><!--/.button-group-->

</form>
<div id="output" aria-atomic="true" aria-live="polite"></div><!--/#output-->

<script src="js/addressbook.js"></script>

</body>
</html>

および JSON ファイル:

{
"addressBook" : [
{
    "name": "hillisha",
    "email": "hill@example.com"
},
{
    "name": "paul",
    "email": "cleveland@example.com"
},
{
    "name": "vishaal",
    "email": "vish@example.com"
},
{
    "name": "mike",
    "email": "grady@example.com"
},
{
    "name": "jamie",
    "email": "dusted@example.com"
},
{
    "name": "gini",
    "email": "g@example.com"
},
{
    "name": "kristen",
    "email": "marv@example.com"
},
{
    "name": "starlen",
    "email": "stars@example.com"
},
{
    "name": "archie",
    "email": "ie@example.com"
},
{
    "name": "bill",
    "email": "hickey@example.com"
}
]
}
4

1 に答える 1

3

デフォルトのアクションを停止していません。keyup イベントには関係ありませんが、フォームは送信されます (action=""同じ場所に送信されるため、実際には気付かれません)。ページを離れると、実行中の ajax リクエストが中止され、ステータス コード 0 が表示されます。

問題はevent.preventDefault();、ajax コールバックから呼び出していることです。それでは遅すぎます。すべてのイベント関連のアクションは既に実行されています。関数の最初の行に移動しますaddr.search

于 2013-06-28T01:32:46.877 に答える