I am having a problem with the following javascript/ajax code. The code searches a JSON file which just has some contact names and email addresses in it. When the "keyup" event calls addr.search everything is fine and in the function call to ajaxCall the attributes request.readyState=4 and request.Status=200, but when the "submit" event calls the same search calling the same addr.search function the request.status is 0 and it fails.
Is it possible it has something to do with the action attribute in the form element?
I should add that I am running this on a WAMP server.
我对下面的javascript/ajax代码有问题。该代码搜索一个JSON文件，其中只有一些联系人姓名和电子邮件地址。当“keyup”事件调用addr时。搜索一切都很好，在函数调用中对属性请求进行ajaxCall。readyState = 4和请求。状态=200，但是当“提交”事件调用相同的搜索时，调用相同的addr。搜索功能请求。状态为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
Here is the html
这是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>
and the JSON file:
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"
}
]
}
1 个解决方案
#1
3
You're not stopping the default action. It doesn't matter for the keyup event, but the form does get submitted (with an action="" to the same location so you're not really noticing it). On leaving the page, the runnning ajax requests get aborted and you see the status code 0.
您没有停止默认操作。对于keyup事件来说，这并不重要，但是表单确实会被提交(使用action=""到相同的位置，所以您并没有真正注意到它)。在离开页面时，runnning ajax请求将被终止，您将看到状态代码0。
The problem is that you're invoking event.preventDefault(); from the ajax callback - it's too late then, all event-related actions have already been run. Move it to the first line of your addr.search function.
问题是您正在调用event.preventDefault();从ajax回调——现在已经太晚了，所有与事件相关的操作都已经运行了。把它移到addr的第一行。搜索功能。
#1
3
You're not stopping the default action. It doesn't matter for the keyup event, but the form does get submitted (with an action="" to the same location so you're not really noticing it). On leaving the page, the runnning ajax requests get aborted and you see the status code 0.
您没有停止默认操作。对于keyup事件来说，这并不重要，但是表单确实会被提交(使用action=""到相同的位置，所以您并没有真正注意到它)。在离开页面时，runnning ajax请求将被终止，您将看到状态代码0。
The problem is that you're invoking event.preventDefault(); from the ajax callback - it's too late then, all event-related actions have already been run. Move it to the first line of your addr.search function.
问题是您正在调用event.preventDefault();从ajax回调——现在已经太晚了，所有与事件相关的操作都已经运行了。把它移到addr的第一行。搜索功能。