次の 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"
}
]
}