Question

尝试使用ajax和jquery访问yahoo weather api。如果使用提交按钮搜索和提交，则工作正常，但我希望仅使用enter keypress进行搜索。它一次只需一个字母，而不是完整的搜索词。

  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

我不会使用自it's not intended for non printable characters以来的“keypress”事件，并且在不冻结整个字段的情况下无法阻止其默认行为。而是使用“keyup”。这是一个可能的解决方案（用适合您需要的submit函数替换）：

$("input").focus().on("keyup", function (ev) {
  ev.preventDefault();
  // if key is ENTER
  if (ev.which === 13) {
    submit($(this).val());
  }
});

function submit (val) {
  $("p").text(val);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input></input> <span>Press <kbd>ENTER</kbd> when you're done.</span>
<p style="border:1px solid black;padding:1em"></p>

作为替代方案，您可以在用户停止写入给定延迟的同时提交：

$("input").focus().on("keyup", debounce(250, function (ev) {
  ev.preventDefault();
  submit($(this).val());
}));

function submit (val) {
  $("p").text(val);
}

function debounce (ms, f) {
  var tid = null;
  return function () {
    var subject = this;
    var args = arguments;
    if (tid) clearTimeout(tid);
    tid = setTimeout(function () {
      tid = null;
      f.apply(subject, args);
    }, ms);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input></input> <span>No need to press <kbd>ENTER</kbd>.</span>
<p style="border:1px solid black;padding:1em"></p>

Answer 2

根据我的理解，你需要进行ajax调用并在按下Enter后更新。请尝试以下代码，只在按下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);
  }
});

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

2 个答案: