使用 JSON 新闻 API 创建搜索查询

Creating a search query using JSON news api

本文关键字：搜索 查询 创建 API JSON 新闻 使用      更新时间：2023-09-26

所以我必须基于编写的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');  
        });
    }
});

首先：
您可以使用javascript（jquery）直接访问此api。

如果您尝试使用普通 url https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=food由于"访问控制-允许-原产地"设置而出现错误。
如果你附加"&callback=？"，你将得到正确的数据返回

现在，您必须将返回的数据附加到列表视图中。

重要的是要知道：返回什么。在你的代码中，data的值或var json的值 因为你没有提供任何 php。我只能直接使用 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 -->

 $(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 -->

相关文章：