Javascript 数据逐个字母发送而不是搜索中的完整单词

Question

尝试使用 ajax 和 jquery 访问 yahoo weather api。如果使用提交按钮进行搜索和提交，效果很好，但我希望仅使用回车键进行搜索。它一次只输入一个字母，而不是完整的搜索词。

  function makeAjaxCall(url, methodType,callback){ 
       var xhr = new XMLHttpRequest();
       xhr.open(methodType, url, true);
       xhr.send();
       xhr.onreadystatechange = function(){
         if (xhr.readyState === 4){
            if (xhr.status === 200){
               console.log("xhr done successfully");
               var resp = xhr.responseText;
               var respJson = JSON.parse(resp);
              callback(respJson);
            } else {
              console.log("xhr failed");
            }
         } else {
            console.log("xhr processing going on");
         }
      }
      console.log("request sent succesfully");

    }



    function processUserDetailsResponse(userData){  //Callback function
      console.log(userData.query.results.channel.astronomy);




    }
    $('#inpt_search').keypress(function(e){
        if(e === 'Enter'){
        var city = $("#sunrise").value;
        console.log(city);
        e.preventDefault();
        }
    var url = 'https://query.yahooapis.com/v1/public/yql?q=select%20astronomy%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22'+ city +'%2C%20%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
    makeAjaxCall(url, "GET", processUserDetailsResponse); enter code here //calling api using ajax
    });

Answer 1

据我了解，您需要在按下 Enter 后进行 ajax 调用和更新。试试下面的代码，它只在按下 enter 时调用 API。

$('#inpt_search').keypress(function(e){
  if(e.which === 13){
    var city = $("#sunrise").value;
    e.preventDefault();
    var url = 'https://query.yahooapis.com/v1/public/yql?q=select%20astronomy%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22'+ city +'%2C%20%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
    makeAjaxCall(url, "GET", processUserDetailsResponse);
  }
});