Question

我正在尝试创建XMLHttpRequest，但是，我遇到了问题。即使返回false或使用e.preventDefault（），页面也会自动刷新。我试图让城市最终通过一个选项块。（我已经启动了选项部分，并在找出get请求问题后完成它。）我正在尝试使用纯Javascript来完成它，因为我已经使用Angular和Node完成了它。任何帮助将不胜感激。

HTML：

<form id="citySearchForm" method="get" onSubmit="return searchFormFunc();">
         <div>
             <p>Choose a city:</p>
             <input type="text" placeholder="Enter a city" id="getCitiesInput" name="city">
             <input type="submit" value="submit">
         </div>
         <div id="weather"></div
         <p><span id="temp"></span></p
         <p><span id="wind"></span></p>
</form>

使用Javascript：

var citySearch = document.getElementById("citySearchForm");

// citySearch.addEventListener("submit", searchFormFunc);

function searchFormFunc(e){

    cityName = document.getElementById('getCitiesInput').value;

    var searchCityLink = "http://autocomplete.wunderground.com/aq?query=";
    var search = searchCityLink.concat(cityName);

    console.log("link : " + search);

    var xhr = XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            var r = JSON.parse(xhr.response || xhr.responseText); // IE9 has no property response, so you have to use responseText

            console.log(r);
        } else {
            console.log('error');
        }
  };

    xhr.open("GET", link, true);
    xhr.send(null);

    var r = JSON.parse(xhr.response);

     return false;

 //  e.preventDefault();
}

Answer 1

您指定要将此作为异步请求。因此，您需要在onreadystatechange或onload内解析您的回复。

function ajax(url, callback) {
    var xhr;

    if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest();
    else {
        var versions = ["MSXML2.XmlHttp.5.0", 
                        "MSXML2.XmlHttp.4.0",
                        "MSXML2.XmlHttp.3.0", 
                        "MSXML2.XmlHttp.2.0",
                        "Microsoft.XmlHttp"]

         for(var i = 0, len = versions.length; i < len; i++) {
            try {
                xhr = new ActiveXObject(versions[i]);
                break;
            }
            catch(e){}
         } // end for
    }

    /** Here you can specify what should be done **/
    xhr.onreadystatechange = function() {
        if(xhr.readyState < 4) {
            return;
        }

        if(xhr.status !== 200) {
            return;
        }

        // all is well  
        if(xhr.readyState === 4) {
            callback(xhr);
        }           
    }

    xhr.open('GET', url, true);
    xhr.send('');
}

来自user6123921

的文档回答

Answer 2

您必须使用var xhr = new XMLHttpRequest();
您必须定义onreadystatechange事件监听器

    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            var r = JSON.parse(xhr.response || xhr.responseText); // IE9 has no property response, so you have to use responseText

            console.log(r);

            /* do stuff with response */
        }
    };

无法创建XMLHttpRequest（）

2 个答案: