Fetch API Запрос на получение не распознает значения из формы ввода
Я пытаюсь получить значения из запроса на выборку, используя ввод из формы с именем и фамилией игрока. Возвращаемый json имеет общий размер 0, но когда я жестко кодирую значение имен, я получаю правильную информацию. Я пробовал переключать запрос на выборку разными способами, но не могу получить ответ, который ищу.
В документации API говорится:
Если вы используете один поисковый запрос, то есть используете «cespedes» вместо «yoenis cespedes», вам нужно будет добавить символ «% 25» к вашему поисковому запросу. Без него запрос вернет 500.
<body>
<div>
<form action = "">
<label for = "fname">First name:</label><br />
<input type = "text" id = "fname" name = "fname" value = "" /><br />
<label for = "lname">Last name:</label><br />
<input type = "text" id = "lname" name = "lname" value = "" /><br /><br />
<input type = "submit" value = "Submit" />
</form>
</div>
<script>
fetch(
'http://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code=%27mlb%27&active_sw=%27Y%27&name_part=%27' +
'fname' +
'_' +
'lname' +
'%27'
)
.then(function test(res) {
return res.json();
})
.then(function test1(data) {
console.info('data', data);
});
</script>
</body>
Когда я использую эту выборку с включенным именем, она возвращает правильный файл json.
http://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code=%27mlb%27&active_sw=%27Y%27&name_part=%27francisco_lindor%25%27
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
При создании URL-адреса для получения вы должны фактически включить значения формы.
Ваш текущий код
'http://...&name_part=%27' + 'fname' + '_' + 'lname' + '%27'
всегда приведет к
"http://...&name_part='fname_lname'"
независимо от входных данных формы, потому что здесь вы просто объединяете строковые литералы. Вы можете проверить это, зарегистрировав создаваемые вами URL-адреса перед их отправкой.
Вы должны получить значения формы в javascript, чтобы отправить их. Например, вы можете получить значения входных данных и сохранить их в таких переменных:
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
Затем вы можете использовать эти значения для создания своего URL-адреса:
var url = 'http://...&name_part=%27' + fname + '_' + lname + '%27';
Следите за fname и lname. Они не заключаются в кавычки, поэтому javascript будет использовать переменные.
Текущая выборка отправляет fname и lname в виде строк вместо использования их фактических значений. Это должно работать нормально:
const form = document.querySelector('form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
form.addEventListener('submit', e => {
e.preventDefault();
fetch(`http://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code=%27mlb%27&active_sw=%27Y%27&name_part=%27${fname.value}_${lname.value}%27`)
.then(res => res.json())
.then(data => console.info(data));
})<div>
<form>
<label for = "fname">First name:</label><br />
<input type = "text" id = "fname" name = "fname" value = "Aaron" /><br />
<label for = "lname">Last name:</label><br />
<input type = "text" id = "lname" name = "lname" value = "Judge" /><br /><br />
<input type = "submit" value = "Submit" />
</form>
</div>