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进行尝试，则会因“访问控制 - 允许 - 来源”设置而出现错误。
如果你附加“＆amp; 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 -->

Answer 2

＆＃13;

 $(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");
       });



     }
   });
 });

＆＃13;

<!-- 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 -->

＆＃13;

使用JSON news api创建搜索查询

2 个答案: