Question

目前显示的唯一结果是当您更改查询等于我想要更改此项以允许用户输入的内容时

我已经放入了这个领域我只需要帮助改变我的ajax以接受新代码搜索这是一个关键部分

我的html到目前为止

<html>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script>
window.gamer = function(data) {
          var table = '<table>';
          $.each( data.results, function( key, value ) {
          table += '<tr><tr><td><img src="' + value.image + '"/></td><td><td>' + value.name + '</td><td>' + value.resource_type + '</td></tr>';
        });
            table += '</table>';
        $('#myelement').html(table);
}

$('#search').click( function() {
    $.ajax({
      url: "http://api.giantbomb.com/search/",
      type: "get",
        data: {api_key : "516f7cff88df5d3a5e493a40dcc8499f63e667ea", query: $('#game').val(), resources : "game", field_list : "name, resource_type, image", format : "jsonp", json_callback: "gamer"} ,
      dataType: "jsonp"
    });
});


    </script>

  </head>
  <body>
  <h1>Game Search</h1>
  <input id="game" type="text" /><button id="search">Search</button>
  <div id="myelement"></div>
  </body>
</html>

和一个jsfiddle，所以你可以看到问题，没有结果正在哄抬

http://jsfiddle.net/dG7w5/

Answer 1

如果我理解正确，你需要像

这样的东西

$('#search').click( function() {
    $.ajax({
      url: "http://api.giantbomb.com/search/",
      type: "get",
      data: {api_key : "My API key", query: $('#game').val(), resources : "game", field_list : "name, resource_type, image", format : "jsonp", json_callback : "gamer" },
      dataType: "jsonp"
    });
});

您可以在更改事件时收听以在键入时自动加载搜索结果。但是你应该使用下划线debounce方法来阻止太多的请求被触发。

Answer 2

试试这个：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script>
        function btnClick() {
          $.ajax({
            url: "http://api.giantbomb.com/search/",
            type: "post",
            data: {api_key : "API KEY", query: $('#game').value, 
                   resources : "game", field_list : "name, resource_type, image", 
                   format : "jsonp" },
            dataType: "jsonp"
          })
          .done(function(gbdata, gbstatus) {
              alert( 'Done: ' + JSON.stringify(gbdata) );
          })
          .fail(function(gbstatus) {
              alert( 'Fail: ' + JSON.stringify(gbstatus) );
          })
          .always(function(gbdata, gbstatus) {
              $('#myelement').html( JSON.stringify(gbdata) );
              alert( 'Always: ' + JSON.stringify(gbdata) );
          });
        }
    </script>
  </head>
  <body>
  <h1>Game Search</h1>
  <input id="game" type="text" />
  <button id="search" onclick="btnClick()">Search</button>
  <div id="myelement"></div>
  </body>
</html>

我更改了按钮以包含直接触发ajax调用的click事件。我从数据中删除了回调，因为jQuery有一个更优雅的解决方案（.done()，.fail()和.always()）。

您必须更改实际密钥的文本API密钥。

您还必须将代码放入ajax回调（.done()等）以处理从查询提供程序返回的内容。

在您提供的代码示例中，错误是在回调函数名称周围引用了引号。应该是：

data: {api_key : "API KEY", query: $('#game').value, 
       resources : "game", field_list : "name, resource_type, image", 
       format : "jsonp", json_callback : gamer },

将简单的搜索功能添加到ajax

2 个答案: