小贝子编程

搜索功能不起作用，无法在html元素中显示结果



我正在创建一个网页，通过单击下拉选项，然后单击"显示"按钮，用户可以搜索并将外部库网页url的搜索结果加载到我的网页中。通过单击搜索按钮，我的网页应该启动/调用setSearchParameters((-函数(它调用与这些特定下拉选项相关的其他函数(，并将搜索结果加载到我的网页上。

我已经检查了来自不同线程的关于Stackoverflow的答案(还有那些在写这个问题时自动建议的答案(，但似乎什么都不起作用。这是我迄今为止的代码。单击Display按钮的Onclick事件应该调用setSearchParameters((-函数并加载结果，例如在form元素上。

我的代码现在的问题是，当我从下拉列表中选择选项并单击"显示"按钮时，它根本不会加载搜索结果。它不显示/显示任何结果。我尝试Axios为某些下拉选项组合创建搜索功能。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page for library search</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!--JQuery-libraries:   -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function getFinnishBooks() {
axios.get('https://finna.fi/Search/Results?limit=0&filter%5B%5D=%7Eformat%3A%220%2FBook%2F%22&filter%5B%5D=%7Elanguage%3A%22fin%22&type=AllFields')
.then(res => {
console.log(res.data.login);
});
.catch(err => {
console.log(err);
});
}
</script>
<script>
function getEnglishBooks() {
axios.get('https://finna.fi/Search/Results?limit=0&filter%5B%5D=%7Eformat%3A%220%2FBook%2F%22&filter%5B%5D=%7Elanguage%3A%22fin%22&filter%5B%5D=%7Elanguage%3A%22eng%22&type=AllFields')
.then(res => {
console.log(res.data.login);
});
.catch(err => {
console.log(err);
});
}
</script>
<script>
function getFinnishRecordings() {
axios.get('https://finna.fi/Search/Results?sort=relevance&bool0%5B%5D=AND&lookfor0%5B%5D=&type0%5B%5D=AllFields&lookfor0%5B%5D=&type0%5B%5D=AllFields&join=AND&filter%5B%5D=%7Elanguage%3A%22fin%22&filter%5B%5D=%7Eformat%3A%220%2FSound%2F%22&limit=20')
.then(res => {
console.log(res.data.login);
});
.catch(err => {
console.log(err);
});
}
</script>
<script>
function getEnglishRecordings() {
axios.get('https://finna.fi/Search/Results?sort=relevance&bool0%5B%5D=AND&lookfor0%5B%5D=&type0%5B%5D=AllFields&lookfor0%5B%5D=&type0%5B%5D=AllFields&join=AND&filter%5B%5D=%7Elanguage%3A%22eng%22&filter%5B%5D=%7Eformat%3A%220%2FSound%2F%22&limit=20');
console.log(res.data.login);
});
.catch(err => {
console.log(err);
});
}
</script>
<script>
function setSearchParameters() {
const choice = select.value;
if (choice == 'books' && choice == 'finnish') {
getFinnishBooks();
} else if (choice == 'books' && choice == 'english') {
getEnglishBooks();
} else if (choice == 'books' && choice == 'swedish') {
getEnglishBooks();
} else if (choice == 'recordings' && choice == 'finnish') {
getFinnishRecordings();
} else if (choice == 'recordings' && choice == 'english') {
getFinnishRecordings();
else if (choice == 'recordings' && choice == 'swedish') {
getFinnishRecordings();
}
}
</script>
</head>
<body>
<!-- /*Style begins*/ -->
<style>
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #FFFFFF;
}
/* Modify the background color */

.navbar-custom {
/*background-color: #AB47BC;*/
background-color: #4A148C;
}

.navbar-collapse .collapse {
color: #FFFFFF;
}

.dropdown {
background-color: #FFEBEE;
}

iframe {
width: 400px;
height: 200px;
border: 1px solid black;
border-radius: 5px;
}
</style>
<!-- /* Style ends */ -->
<div class="jumbotron text-center">
<h1>Search library books and other stuff!</h1>
<p>Search library books, recordings and other products from the library selection</p>
</div>
<!-- /*
*/ -->
<div class="container">
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#option-droup-demo').multiselect({
enableClickableOptGroups: true
});
});
</script>
<select id="option-droup-demo" multiple="multiple">
<optgroup label="Material">
<option value="books">Books</option>
<option value="recordings">Recordings</option>
<optgroup label="Languages">
<option value="finnish">Finnish</option>
<option value="english">English</option>
<option value="swedish">Swedish</option>
</optgroup>
</select>
</div>
</div>
</div>
<form>
<!-- <button type="submit" onclick="return setSearchParameters();">Submit</button> -->
<input type="button" onclick="setSearchParameters()" value="Display">
</form>
</body>
<footer class="bg-light text-center text-lg-start">
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2); margin-top: 1%; background-color: #4A148C; color: #FFFFFF; margin-bottom:0%">
<a class="text-white" href="https://finna.fi/">Original page</a>
</div>
</footer>
</html>

在大多数提取和某些提取不完整之后，您都有无效的分号。此外，您还没有加载多选库，并且您有一个select.value，其中您没有定义一个名为select的对象。这只是众多问题中的一部分

这不再产生错误

但是if (choice == 'books' && choice == 'finnish') {永远不会工作

所以我改为两个下拉菜单-现在我们只收到网络错误，因为CORS问题

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page for library search</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!--JQuery-libraries:   -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function getFinnishBooks() {
axios.get('https://finna.fi/Search/Results?limit=0&filter%5B%5D=%7Eformat%3A%220%2FBook%2F%22&filter%5B%5D=%7Elanguage%3A%22fin%22&type=AllFields')
.then(res => {
console.log(res.data.login);
})
.catch(err => {
console.log(err);
});
}
</script>
<script>
function getEnglishBooks() {
axios.get('https://finna.fi/Search/Results?limit=0&filter%5B%5D=%7Eformat%3A%220%2FBook%2F%22&filter%5B%5D=%7Elanguage%3A%22fin%22&filter%5B%5D=%7Elanguage%3A%22eng%22&type=AllFields')
.then(res => {
console.log(res.data.login);
})
.catch(err => {
console.log(err);
});
}
</script>
<script>
function getFinnishRecordings() {
axios.get('https://finna.fi/Search/Results?sort=relevance&bool0%5B%5D=AND&lookfor0%5B%5D=&type0%5B%5D=AllFields&lookfor0%5B%5D=&type0%5B%5D=AllFields&join=AND&filter%5B%5D=%7Elanguage%3A%22fin%22&filter%5B%5D=%7Eformat%3A%220%2FSound%2F%22&limit=20')
.then(res => {
console.log(res.data.login);
})
.catch(err => {
console.log(err);
});
}
</script>
<script>
function getEnglishRecordings() {
axios.get('https://finna.fi/Search/Results?sort=relevance&bool0%5B%5D=AND&lookfor0%5B%5D=&type0%5B%5D=AllFields&lookfor0%5B%5D=&type0%5B%5D=AllFields&join=AND&filter%5B%5D=%7Elanguage%3A%22eng%22&filter%5B%5D=%7Eformat%3A%220%2FSound%2F%22&limit=20')
.then(res => {
console.log(res.data.login);
})
.catch(err => {
console.log(err);
});
}
</script>
<script>
function setSearchParameters() {
const material = $("#material").val()
const language = $("#language").val()

if (material == 'books' && language == 'finnish') {
getFinnishBooks();
} else if (material == 'books' && language == 'english') {
getEnglishBooks();
} else if (material == 'books' && language == 'swedish') {
getEnglishBooks();
} else if (material == 'recordings' && language == 'finnish') {
getFinnishRecordings();
} else if (material == 'recordings' && language == 'english') {
getFinnishRecordings();
} else if (material == 'recordings' && language == 'swedish') {
getFinnishRecordings();
}
}
</script>
</head>
<body>
<!-- /*Style begins*/ -->
<style>
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #FFFFFF;
}
/* Modify the background color */

.navbar-custom {
/*background-color: #AB47BC;*/
background-color: #4A148C;
}

.navbar-collapse .collapse {
color: #FFFFFF;
}

.dropdown {
background-color: #FFEBEE;
}

iframe {
width: 400px;
height: 200px;
border: 1px solid black;
border-radius: 5px;
}
</style>
<!-- /* Style ends */ -->
<div class="jumbotron text-center">
<h1>Search library books and other stuff!</h1>
<p>Search library books, recordings and other products from the library selection</p>
</div>
<!-- /*
*/ -->
<div class="container">
<div class="example">
<script type="text/javascript">
/*
$(document).ready(function() {
$('#option-droup-demo').multiselect({
enableClickableOptGroups: true
});
}); */
</script>
<select id="material">
<optgroup label="Material">
<option value="books">Books</option>
<option value="recordings">Recordings</option>
</select>
<select id="language">

<optgroup label="Languages">
<option value="finnish">Finnish</option>
<option value="english">English</option>
<option value="swedish">Swedish</option>
</optgroup>
</select>
</div>
</div>
</div>
<form>
<!-- <button type="submit" onclick="return setSearchParameters();">Submit</button> -->
<input type="button" onclick="setSearchParameters()" value="Display">
</form>
</body>
<footer class="bg-light text-center text-lg-start">
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2); margin-top: 1%; background-color: #4A148C; color: #FFFFFF; margin-bottom:0%">
<a class="text-white" href="https://finna.fi/">Original page</a>
</div>
</footer>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium