Implementacja skryptu do obsługi REST API
This commit is contained in:
parent
50622588a2
commit
3bb1412966
@ -38,7 +38,7 @@
|
||||
<ul class="nav-menu">
|
||||
<li class="menu-active"><a href="index.html">Strona główna</a></li>
|
||||
<li><a href="opis.html">O nas</a></li>
|
||||
<li><a href="ankieta.html">Rekomendacja</a></li>
|
||||
<li><a href="search.html">Rekomendacja</a></li>
|
||||
<li><a href="lista.html">Galeria</a></li>
|
||||
</ul>
|
||||
</nav><!-- #nav-menu-container -->
|
||||
|
||||
@ -1,29 +1,77 @@
|
||||
function sendJSON() {
|
||||
//let result = document.querySelector('.result');
|
||||
let fuel_type = document.querySelector('#fuel_type');
|
||||
let seats = document.querySelector('#seats');
|
||||
let doors = document.querySelector('#doors');
|
||||
let maximum_price = document.querySelector('#maximum_price');
|
||||
let max_years_old = document.querySelector('#max_years_old');
|
||||
let engine_power = document.querySelector('#engine_power');
|
||||
let car_type = document.querySelector('#car_type');
|
||||
let gearbox = document.querySelector('#gearbox');
|
||||
let drive_type = document.querySelector('#drive_type');
|
||||
let result = document.querySelector('.result');
|
||||
let fuel_type = document.getElementById('fuel_type');
|
||||
let seats = document.getElementsByClassName('seats')[0];
|
||||
let doors = document.getElementById('doors');
|
||||
let maximum_price = document.getElementById('maximum_price');
|
||||
let max_years_old = document.getElementById('max_years_old');
|
||||
let engine_power_from = document.getElementById('engine_power_from');
|
||||
let engine_power_to = document.getElementById('engine_power_to');
|
||||
let body_type = document.getElementById('body_type');
|
||||
let gearbox = document.getElementById('gearbox');
|
||||
let drive_type = document.getElementById('drive_type');
|
||||
|
||||
|
||||
let req = new XMLHttpRequest();
|
||||
let url = "";
|
||||
// let url = "https://jsonplaceholder.typicode.com/photos";
|
||||
// let url = "https://webhook.site/b1792c3d-cd5a-4c29-8e9c-1ff9f84653eb";
|
||||
let url = "http://34.65.132.148:8080";
|
||||
var params = [];
|
||||
|
||||
req.open("GET", url, true);
|
||||
if(fuel_type.value != -1){
|
||||
params.push("fuel_type="+fuel_type.options[fuel_type.value].text);
|
||||
}
|
||||
if(seats.value > 0){
|
||||
params.push("seats="+seats.value);
|
||||
}
|
||||
if(doors.value != -1){
|
||||
params.push("doors="+doors.options[doors.value].text);
|
||||
}
|
||||
if(maximum_price.value > 0){
|
||||
params.push("maximum_price="+maximum_price.value);
|
||||
}
|
||||
if(max_years_old.value > 0){
|
||||
params.push("max_years_old="+max_years_old.value);
|
||||
}
|
||||
if(engine_power_from.value > 0){
|
||||
params.push("engine_power_from="+engine_power_from.value);
|
||||
}
|
||||
if(engine_power_to.value > 0){
|
||||
params.push("engine_power_to="+engine_power_to.value);
|
||||
}
|
||||
if(body_type.value != -1){
|
||||
params.push("body_type="+body_type.value);
|
||||
}
|
||||
if(gearbox.value != -1){
|
||||
params.push("gearbox="+gearbox.value);
|
||||
}
|
||||
if(drive_type.value != -1){
|
||||
params.push("drive_type="+drive_type.value);
|
||||
}
|
||||
|
||||
req.setRequestHeader("Content-Type", "application/json");
|
||||
var buff = "";
|
||||
if(params.length>0){
|
||||
buff += "?";
|
||||
for (var i = 0, len = params.length; i < len; i++) {
|
||||
buff += params[i];
|
||||
buff += "\&";
|
||||
}
|
||||
buff = buff.substr(0, buff.length-1); //obcinanie ostatego znaku
|
||||
}
|
||||
|
||||
console.log("Debug: " + buff);
|
||||
|
||||
// Create a state change callback
|
||||
req.open("GET", url+buff, true);
|
||||
req.setRequestHeader("Content-Type", "text/html");
|
||||
req.send();
|
||||
|
||||
// Create a state change callback
|
||||
req.onreadystatechange = function () {
|
||||
if (req.readyState === 4 && req.status === 200) {
|
||||
if (req.readyState === 4 && req.status === 200) {
|
||||
|
||||
Print received data from server
|
||||
result.innerHTML = this.responseText;
|
||||
// Print received data from server
|
||||
// result.innerHTML = this.responseText;
|
||||
// result.innerHTML = fuel_type.options[0].text;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -56,81 +56,71 @@
|
||||
<div class="col-lg-10 col-md-10 header-right ">
|
||||
<h4 class="pb-10">Uzupełnij pola</h4>
|
||||
<form class="form" name="myForm" action="sendingRequest.js" method="post" enctype="application/x-www-form-urlencoded">
|
||||
<div class="form-group ">
|
||||
<div class="default-select" id="default-select">
|
||||
<select name="fuel_type">
|
||||
<option value="-1" disabled selected hidden>Rodzaj paliwa</option>
|
||||
<div class="form-group">
|
||||
Typ paliwa:
|
||||
<div class="default-select">
|
||||
<select id="fuel_type">
|
||||
<option value="-1">Dowolny</option>
|
||||
<option value="1">Benzyna</option>
|
||||
<option value="2">LPG</option>
|
||||
<option value="2">Benzyna+LPG</option>
|
||||
<option value="3">Diesel</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="default-select" id="default-select">
|
||||
<select name="seats">
|
||||
<option value="-1" disabled selected hidden>Pojemność (liczba miejsc)</option>
|
||||
<option value="1">2</option>
|
||||
<option value="2">4</option>
|
||||
<option value="3">5</option>
|
||||
<option value="4">więcej niż 5</option>
|
||||
</select>
|
||||
Liczba miejsc:
|
||||
<div class="default-select">
|
||||
<input class="seats" id="seats">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="default-select" id="default-select">
|
||||
<select name="doors">
|
||||
<option value="-1" disabled selected hidden>Liczba drzwi</option>
|
||||
<div class="default-select">
|
||||
<select id="doors">
|
||||
Liczba drzwi:
|
||||
<option value="-1">Dowolna</option>
|
||||
<option value="1">3</option>
|
||||
<option value="2">4</option>
|
||||
<option value="3">5</option>
|
||||
<option value="2">5</option>
|
||||
<option value="3">większa niż 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="default-select" id="default-select">
|
||||
<select name="maximum_price">
|
||||
<option value="-1" disabled selected hidden>Maksymalna cena</option>
|
||||
<option value="5000">5 tys. zł</option>
|
||||
<option value="10000">10 tys. zł </option>
|
||||
<option value="15000">15 tys. zł</option>
|
||||
<option value="20000">20 tys. zł</option>
|
||||
<option value="25000">25 tys. zł</option>
|
||||
<option value="30000">30 tys. zł</option>
|
||||
</select>
|
||||
<div class="default-select">
|
||||
Budżet:
|
||||
<input id="maximum_price">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="default-select" id="default-select">
|
||||
<select name="max_years_old">
|
||||
<option value="-1" disabled selected hidden>Maksymalna wiek</option>
|
||||
<option value="1">1 rok</option>
|
||||
<option value="2">2 lata</option>
|
||||
<option value="3">3 lata</option>
|
||||
<option value="6">6 lat</option>
|
||||
<option value="8">8 lat</option>
|
||||
<option value="10">więcej niż 10 lat</option>
|
||||
</select>
|
||||
<div class="default-select">
|
||||
Maksymalny wiek pojazdu:
|
||||
<input id="max_years_old">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="default-select" id="default-select">
|
||||
<select name="engine_power">
|
||||
<option value="-1" disabled selected hidden>Minimalna moc silnika</option>
|
||||
<option value="60">60 KM</option>
|
||||
<option value="100">100 KM</option>
|
||||
<option value="150">150 KM</option>
|
||||
<option value="200">200 KM</option>
|
||||
<option value="250">250 KM</option>
|
||||
</select>
|
||||
<div class="default-select">
|
||||
Moc od:
|
||||
<input id="engine_power_from">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="default-select" id="default-select">
|
||||
<select name="car_type">
|
||||
<option value="-1" disabled selected hidden>Typ</option>
|
||||
<div class="default-select">
|
||||
Moc do:
|
||||
<input id="engine_power_to">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="default-select">
|
||||
Typ nadwozia:
|
||||
<select id="body_type">
|
||||
<option value="-1">Dowolny</option>
|
||||
<option value="hetchback">Hetchback</option>
|
||||
<option value="SUV">SUV</option>
|
||||
<option value="coupe">Coupe</option>
|
||||
@ -140,19 +130,21 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="default-select" id="default-select">
|
||||
<select name="gearbox">
|
||||
<option value="-1" disabled selected hidden>Skrzynia biegów</option>
|
||||
<option value="manual">Ręczna</option>
|
||||
<div class="default-select">
|
||||
Skrzynia biegów:
|
||||
<select id="gearbox">
|
||||
<option value="-1">Dowolna</option>
|
||||
<option value="manual">Manualna</option>
|
||||
<option value="automatic">Automatyczna</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="default-select" id="default-select">
|
||||
<select name="drive_type">
|
||||
<option value="-1" disabled selected hidden>Napęd</option>
|
||||
<div class="default-select">
|
||||
Rodzaj napędu:
|
||||
<select id="drive_type">
|
||||
<option value="-1">Dowolny</option>
|
||||
<option value="1">Na przednie koła</option>
|
||||
<option value="2">Na tylnie koła</option>
|
||||
<option value="3">Na cztery koła</option>
|
||||
@ -161,7 +153,8 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="submit" value="wyslij" class="primary-btn" onclick="sendJSON()" />
|
||||
<input value="Szukaj" class="primary-btn" onclick="sendJSON()" />
|
||||
<div class="result">Test</div>
|
||||
</div>
|
||||
<div id="wypisywanie"></div>
|
||||
</form>
|
||||
@ -199,19 +192,7 @@
|
||||
<img class="footer-bottom" alt="">
|
||||
</footer>
|
||||
<!-- End footer Area -->
|
||||
<script src="js/vendor/jquery-2.2.4.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||
<script src="js/vendor/bootstrap.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
|
||||
<script src="js/easing.min.js"></script>
|
||||
<script src="js/hoverIntent.js"></script>
|
||||
<script src="js/superfish.min.js"></script>
|
||||
<script src="js/jquery.ajaxchimp.min.js"></script>
|
||||
<script src="js/jquery.magnific-popup.min.js"></script>
|
||||
<script src="js/jquery-ui.js"></script>
|
||||
<script src="js/jquery.nice-select.min.js"></script>
|
||||
<script src="js/mail-script.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="sendingRequest.js"></script>
|
||||
|
||||
<script src="js/sendingRequest.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user