2017-04-25 53 views
0
<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请求无法继续。任何人都可以指出这个问题。 (''click',function(){ ........}也可以,但不工作。获取Ajax请求的输入标记的值

+1

值不确定你的情况,你已经宣布,并用它作为URL –

+0

是它到达成功的一部分? – funcoding

+0

你从哪里获得“价值”的价值,让我们回过头来问题,你开始问一些问题,最后问了别的问题。 –

回答

1

我做了成功函数内部进行快速检查,以什么data被存储。在仅举几个例子之后,我注意到每个例子的关键(六位数字)是不同的。因此,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>

1

当我粘贴你的代码与这一成功功能success: function(data){ console.log(data) } Ajax调用工作正常的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获取参数给他们。我还遍历结果页面和链接对象以生成列表项目。

在这里,你可以阅读有关jQuery的AJAX方法和选项:https://api.jquery.com/jQuery.ajax/