Question

我正在研究的是提供一行术语的即时定义，也许一行回答几个逻辑问题。假设用户输入“JavaScript”并且JavaScript访问网址https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1，获取项目“定义”（查看API链接以了解，定义是在第一行本身）并显示其值定义并提醒用户拥有所需的数据。

无论如何我的代码目前是：

<html>
<head>
<title>Hi</title></head>
<body>
<input id="ddgAPI"><button>Search</button>
<div id="output"></div>
</body>
</html>

请注意，我没有输入所需的JavaScript / jQuery代码，因为我对此感到困惑。谢谢:)）

Answer 1

由于这是跨域请求，因此您只能使用代理或JSONP执行此操作。幸运的是DuckDuckGo supports JSONP，所以你只需要确保向URL请求添加一个回调参数，如：

https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1&callback=jsonp

...或者使用jQuery的ajax方法使用适当的jsonp参数，例如：

$('#ddgAPI').on('keyup', function(e) {

  if (e.which === '13') {
    $.ajax({
      type: 'GET',
      url: 'https://api.duckduckgo.com/',
      data: { q: $(this).val(), format: 'json', pretty: 1 },
      jsonpCallback: 'jsonp',
      dataType: 'jsonp'
    }).then(function (data) {
      console.log(data);
    });
  }

});

Answer 2

使用jQuery.ajax()与远程服务通信。 url应为https://api.duckduckgo.com。 type应为GET。 data应该是：

var data = { q:'JavaScript', format:'json', pretty:1 };

然后jQuery会将所有内容编译成AJAX请求，并将其发送到服务器。将函数传递给success，以便您可以对结果执行某些操作：

$.ajax({
    url: "https://api.duckduckgo.com",
    type: "GET",
    data: { q:'JavaScript', format:'json', pretty:1 },
    success: function(data) {  $('#output').html(data); }
});

从Web API中提取和读取JSON数据

2 个答案: