javascript - 使用 JSON 新闻 api 创建搜索查询

Question

因此，我必须根据编写的 javascript 文件(如下)创建搜索查询，并且还必须使用此 URL 来创建搜索查询。在 URL 末尾，您可以添加任何您喜欢的搜索词。例如，我们将搜索食物:https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=food谁能告诉我如何创建它？

$(document).bind('pageinit', function(ev){
$('#search').on('keyup', function(e){
    if(e.keyCode == 13){
        $.get('search.php', {"q": $('#search').val()}, function(data){
            var json = JSON.parse(data);                
            console.log(json);








            $('#results').listview('refresh');  
        });
    }
});

Answer 1

第一:
您可以使用 javascript (jquery) 直接访问此 api。

如果您尝试使用正常网址https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=food，您会收到错误，因为“访问控制-允许来源”设置。
如果添加“&callback=?”您将得到返回的正确数据

现在您必须将返回的数据附加到 ListView 中。

重要的是要知道:返回的是什么。在您的代码中 data 的值或 var json 的值，因为您没有提供任何 php.ini 文件。我只能直接使用 jquery getJSON 调用来完成。

 $(document).bind('pageinit', function(ev) {
   $('#search').on('keyup', function(e) {
     if (e.keyCode == 13) {

       // The Base URL
       var baseUrl = 'https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=';

       // The question from the inputfield
       var q = $('#search').val();

       // putting the url togehter and append &callback=?
       var url = baseUrl + q + "&callback=?";
       console.log(url);

       // Call The API for a JSON
       $.getJSON(url, function() {
         console.log("success");
       }).done(function(data) {
         console.log("second success");

         console.log(data.responseData.results);

         // create a var for the results and append a header
         var results = '<li data-role="list-divider">Results</li>';

         $.each(data.responseData.results, function(index, item) {

           results += '<li>';
           results += item.title;
           results += '</li>';
         });



         // clear the results . append the results .refresh the listview
         $('#results').empty().append(results).listview('refresh');

       }).fail(function() {
         console.log("error");
       }).always(function() {
         console.log("always");
       });



     }
   });
 });

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<!-- page1 -->
<div data-role="page" id="page1" data-title="page1">
  <!-- Header -->
  <div data-role="header" data-position="fixed">
    <h1>Page 1</h1>
  </div>
  <!-- /Header -->

  <!-- Content -->
  <div role="main" class="ui-content">

    <label for="search">Search Input:</label>
    <input name="search" id="search" value="" placeholder="palceholder" type="search">

    <ul data-role="listview" id="results" data-inset="true">

    </ul>

    <script>
    </script>

  </div>
  <!-- /Content -->

</div>
<!-- /page1 -->