Question

我需要有关此方案的帮助，从多个select标记中获取所有数据并使用这些数据发送API请求。

我有三个选择标记，还有一个按钮可以向新闻API发送请求。用户需要从这些选择标签中选择一个值来设置“源”和“类别”等数据。示例：“https://xxxxxxxxxxxx.org/v2/top-headlines?source='+ source +'+'＆amp; category ='+ cat +'＆amp; apiKey = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”

不确定这是否有效。下面是我的js代码。

//global variables
var apiUrl = 'https://xxxxxxxxxxxxxxxxxx',
apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxx',
displayRequest = document.querySelector('.displayRequestData'),
requestBtn = document.querySelector('#runApi'), //Btn to display data
newsOpt = document.querySelector('#news-selection'), //news select tag
catOpt = document.querySelector('#news-category'); //category select tag


requestBtn.addEventListener('click', newsRequest); //onclick

function sourceSelected() { //news option
    var source = newsOpt !== null ? newsOpt.options[newsOpt.selectedIndex].value : 'the-next-web';
    var cat = catOpt !== null ? catOpt.options[catOpt.selectedIndex].value : 'general';
    return newsRequest(source, cat);
}

function newsRequest(source, cat) {
 axios.get(apiUrl + 'top-headlines?sources=' + source + '&language=' + cat + '&apiKey=' + apiKey)
        .then(function (response) {
            var reStringify = JSON.stringify(response);
            var rejson = JSON.parse(reStringify);

            if (rejson.data.status == 'ok'){
               console.log(rejson.data.articles[1].source.name); 
                //console.log(requestBtn);
            }          
        })
        .catch(function (error) {
            console.log(error);
        });
}

顺便说一下，我收到了这个错误 VM7472：1 GET https://xxxxxxxxxxxxxxxxxxxxxxxx/v2/top-headlines?sources=[object%20MouseEvent]&language=undefined&apiKey=xxxxxxxxxxxxxxxxxxxxxxxxxxxx 400（错误请求）

Answer 1

当您添加事件侦听器以通过onClick调用newsRequest时，将发送到该函数的第一个也是唯一的参数是event对象。因此，source和cat的参数在点击按钮时不会传递给newsRequest。（这就是您生成的URL中包含[object MouseEvent]的原因）

相反，您可能希望在sourceSelected事件中调用onClick函数，该事件将获取当前字段值，然后调用newsRequest函数。

Answer 2

我玩我的代码，它现在正在运行。注意：我正在使用的新闻API不允许我混合一些数据，如country，source和langauge。所以我尝试的东西只允许免费帐户，并且有效。

security

如何从HTML选择标签发出API请求？

2 个答案: