Ajaxリクエストの入力タグの値を取得する

Question

<input type="text" id="autocomplete"> 
<ul></ul> 
    <script> 
    var value; 
    var wikiapi; 
    $('#autocomplete').on('keypress',function(e){ 
     if(e.which==13){ 
      value=$(this).val(); 
      wikiapi="https://en.wikipedia.org/w/api.php?action=query&prop=iwlinks&iwprop=url&titles="+value+"&format=json"; 
      $.ajax({ 
       url:wikiapi, 
       crossDomain:true, 
       dataType:"jsonp", 
       xhrFields: { 
        withCredentials: true 
        }, 
       success: function(data){ 
         var links=data.query.pages[171166].iwlinks; 
         var title=data.query.pages[171166].title; 
         $.each(links,function(i,val){ 
         $('ul').append('<li><a href='+val.url+'>'+title +'</a></li>'); 
        }); 
       console.log(data.query.pages[171166].iwlinks[0].url); 
       } 
      }); 
     } 

    }); 
</script> 

こんにちは、私は入力タグから値を取得しようとしています。しかし、私が試した方法は動作していないようです。値はwikiapi varにまったく渡されません。したがって、ajaxリクエストは続行できません。誰でも問題を指摘できますか？ 私も ".. $（ '＃autocomplete'）を試してみました。（ 'click'、function（）{ ........}

Answer 1

私はdataを格納したものととして成功関数内簡単なチェックをしました。ちょっとした例の後、私はキー（6桁）が各例で異なっていることに気付きました。したがって、var links=data.query.pages[171166].iwlinks;とvar title=data.query.pages[171166].title;はテストのためだけに機能します。 data.query.pagesのキーを取得するには、for loopが必要です。私はまた、$('ul').empty()を追加して、リストにあったものをすべて空にしました。ここではそれが仕事を得るために必要なコードは次のとおりです。

var value; 
 
var wikiapi; 
 
$('#autocomplete').on('keypress', function(e) { 
 
    if (e.which == 13) { 
 
    value = $(this).val(); 
 
    wikiapi = "https://en.wikipedia.org/w/api.php?action=query&prop=iwlinks&iwprop=url&titles=" + value + "&format=json"; 
 
    $.ajax({ 
 
     url: wikiapi, 
 
     crossDomain: true, 
 
     dataType: "jsonp", 
 
     xhrFields: { 
 
     withCredentials: true 
 
     }, 
 
     success: function(data) { 
 
     $('ul').empty(); 
 
     for (var key in data.query.pages) { 
 
      if (data.query.pages.hasOwnProperty(key)) { 
 
      var links = data.query.pages[key].iwlinks; 
 
      var title = data.query.pages[key].title; 
 
      } 
 
     } 
 
     $.each(links, function(i, val) { 
 
      $('ul').append('<li><a href=' + val.url + '>' + title + '</a></li>'); 
 
     }); 
 
     } 
 
    }); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="autocomplete"> 
 
<ul> 
 

 
</ul>

Answer 2

AJAX呼び出しが正常に動作します。この成功機能success: function(data){ console.log(data) }とjsfiddleするためのコード

ですから、APIからあなたの結果を処理するための問題を抱えている

私はそれを読みやすくするために、あなたのコードを書き換えています。。

$(document).on('keypress', '#autocomplete', function (e) { 

    if (e.which === 13) { 

     var options = { 
      url: "https://en.wikipedia.org/w/api.php", 
      data: { 
       action: "query", 
       prop: "iwlinks", 
       iwprop: "url", 
       titles: $(this).val(), 
       format: "json" 
      }, 
      crossDomain: true, 
      dataType: "jsonp", 
      xhrFields: { 
       withCredentials: true 
      } 
     }; 

     $.ajax(options).done(function (data) { 

      var html =''; 

      $.each(data.query.pages, function(pageKey, pageValue) { 

       $.each(pageValue.iwlinks, function(linkKey, linkValue) { 
        html += '<li><a href="' + linkValue.url + '">' + pageValue.title + '</a></li>'; 
       }); 

      }); 

      $('ul').html(html); 

     }).fail(function (err) { 

      console.log(err); 
      alert('Ooops'); 

     }); 
    } 

}); 

私はAjaxのオプションを抽出して、コメントを追加していますURLからそれらへのGETパラメータ。また、結果ページとリンクオブジェクトを繰り返してリスト項目を生成します。ここで

あなたはjQueryのAjaxの方法とオプションについて読むことができます：https://api.jquery.com/jQuery.ajax/