2016-08-22 55 views
0

我已經閱讀了大量的帖子,舊的,新的和維基百科的文檔。如何使用jQuery和維基百科API進行搜索

我有這樣的要求,工程本身和的SANbox:

但是當我嘗試在JavaScript腳本中使用它,我不能讓數據:

我試過ajax和Json:

這裏是我使用的代碼:

  • 一個 'GET' 使用Ajax請求:

代碼標記吮吸

function build_wiki_search_url(pattern) { 
    var base_url = "https://en.wikipedia.org/w/api.php"; 
    var request_url = "?action=query&format=json&list=search&srsearch="; 
    var url = base_url + request_url + pattern; 
    return url; 
} 

$(document).ready(function() { 
    $("#doit").click(function() { 
     console.log("Submit button clicked"); 
     var pattern = $("#search").val(); 
     var url = build_wiki_search_url(pattern); 
     console.log(url); 
    $.ajax({ 
     type: "GET", 
     url: url, 
     dataType: 'jsonp', 
     success: function(data) { 
      console.log(data); 
     }, 
     error: function(errorMessage) { 
      console.log("damnn"); 
      } 
     }); 
     console.log("end"); 
    }); 
}) 
  • 與以下AJAX的一個 'POST' 請求維基百科文檔

    var base_url = "https://en.wikipedia.org/w/api.php"; 
        $.ajax({ 
        contentType: "application/json; charset=utf-8", 
         url: base_url, 
         data: { 
          action: 'query', 
          list: 'search', 
          format: 'json', 
          srsearch: 'einstein', 
          origin: '*', 
        }, 
         dataType: 'json', 
         type: 'POST', 
         success: function(data) { 
          console.log("ok"); 
    
          // do something with data 
         }, 
         error: function(errorMessage) { 
          console.log("damnn"); 
         } 
        }); 
    
  • 和的getJSON嘗試:

    //getJSON atempt. 
        console.log(url + '&callback=?'); 
        $.getJSON(url + '&callback=?', function(json) { 
         console.log("ok"); 
         }); 
    

這裏是我的控制檯輸出:

Submit button clicked  
https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=einstein 
script.js 
end 

回答

0

這個問題來,其實從HTML:

<form > 
    <input type="text" id="search"> <button id="doit"> Search!!</button> 
</form> 

由於該按鈕是一種形式,這個按鈕的正常行爲是生成一個提交動作。這樣的想法是禁用此正常行爲:

$("#doit").click(function(e) { 
    e.preventDefault(); 

完整的工作代碼:

function build_wiki_search_url(pattern) { 
    var base_url = "https://en.wikipedia.org/w/api.php"; 
    var format = "&format=json"; 
    var request_url = "?action=query&format=json&list=search&srsearch="; 
    var url = base_url + request_url + pattern; 
    return url; 
} 
$(document).ready(function() { 
    $("#doit").click(function(e) { 
     e.preventDefault(); 
     console.log("Submit button clicked"); 
     var pattern = $("#search").val(); 
     var url = build_wiki_search_url(pattern); 
     $.ajax({ 
      type: "GET", 
      url: url, 
      dataType: 'jsonp', 
      success: function(data) { 
       console.log(data.query.searchinfo.totalhits); 
      }, 
      error: function(errorMessage) { 
       console.log("damnn"); 
       } 
     }); 
    }); 
})