using an addEventListener onclick with api ajax

Question

我对这个问题很困惑。

我有一个文本区域，我想点击一个按钮

1. 将地址文本转换为大写
2. 遍历我从 API 获取的数据，并检查是否地址匹配。

我已经为此工作了几天，通过stackoverflow问题和Mozilla文档寻找答案。我尝试只执行第一步，并且一直收到未捕获的语法错误：输入错误的意外结束。但我相信我的语法是正确的。

.HTML

<form>
       <p>Check to is if street light service has already been requested</p><br>
       <input type="text" name="service" id="chiService">
       <button type="button" id="btn">Try it</button>

     </form>

爪哇语

$.ajax({
url: "https://data.cityofchicago.org/resource/h5ea-dn36.json",
type: "GET",
data: {
  "$limit" : 4,
  "$$app_token" : "APP_TOKEN"
}
 }).done(function(data) {

var el = document.getElementById("btn");

function serviceFunction(myData){
 var userStreetAddress = document.getElementById('chiService').value;
 userStreetAddress = userStreetAddress.toUpperCase();
 /*for(var i = 1; i < myData.length; i++){
    if(myData.street_address[i] == userStreetAddress){
         console.log('its working!');
     }
 */} 
   alert(userStreetAddress);
  };
el.addEventListener("click", serviceFunction(data), false);

});//end of ajax function

Answer 1

你可以尝试一个完整的jquery实现，看起来更好一点：

$.ajax({
url: "https://data.cityofchicago.org/resource/h5ea-dn36.json",
type: "GET",
data: {
  "$limit" : 4,
  "$$app_token" : "APP_TOKEN"
}
 }).done(function(data) {
$('#btn').click(function(){//the click event
 var userStreetAddress = $('#chiService').val().toUpperCase();//get the value
 $.each(data,function(i,v) {//the loop
  if(v.street_address == userStreetAddress) {
         console.log('its working!');
     }
 });
})
});//end of ajax function

Answer 2

立即调用"serviceFunction(data("的原因是因为您指定单击侦听器 (el.addEventListener( 以立即调用它进行单击。如果你想在点击时调用ajax调用，然后在接收ajax响应时运行"serviceFunction(data("，你可以尝试：

var el = document.getElementById("btn");
el.addEventListener("click", serviceFunction(data), false);
function serviceFunction(myData){
$.ajax({
url: "https://data.cityofchicago.org/resource/h5ea-dn36.json",
type: "GET",
data: {
  "$limit" : 4,
  "$$app_token" : "APP_TOKEN"
}
 }).done(function(myData) {   
 var userStreetAddress = document.getElementById('chiService').value;
 userStreetAddress = userStreetAddress.toUpperCase();
 /*for(var i = 1; i < myData.length; i++){
    if(myData.street_address[i] == userStreetAddress){
         console.log('its working!');
     }
 } */
   alert(streetAddress);
});//end of ajax function
}