szabomarton/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added ajax and fetch CORS error example, this code should not work unless you run it in xammp

Browse Source
This commit is contained in:
szabomarton 2024-11-18 13:03:08 +01:00
parent 01b1a717df
commit 0ca86bd7c1
5 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
24_11_18/24_11_18 - Frontend.pptx Normal file
View File

Binary file not shown.

34
24_11_18/feladat1.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<select name="selection" id="selection">
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
</select>
</form>
<button id="button">Lekér</button>
<div id="eredmeny"></div>
<script src="feladat1.js" defer></script>
</body>
</html>

57
24_11_18/feladat1.js Normal file
View File

@ -0,0 +1,57 @@
const url = "http://127.0.0.1/PHP_digivagyok/20241118_JS/munkasok.json";
document.getElementById("button").addEventListener("click", function(){
let value = document.getElementById("selection").value;
console.log(value);
main(value);
});
/*
async function main(munkasNumber) {
let xhttp = new XMLHttpRequest();
xhttp.open("GET", url, true);
xhttp.onreadystatechange = async function(){
if (xhttp.readyState === 4){
if (xhttp.status === 200){
let sol = await JSON.parse(xhttp.responseText);
console.log(sol);
createDomElement(sol[munkasNumber - 1]);
} else if(xhttp.status === 404){
console.log("Az erőforrás nem található - 404 hibakód");
} else{
console.error(`Hiba történt, státuszkód: ${xhttp.status}`);
}
}
}
xhttp.send();
}
*/
async function main(munkasNumber) {
try{
let response = await fetch(url);
if (!response.ok){
throw new Error(`Hiba történt: ${response.status}`);
}
let adatok = await response.json();
createDomElement(adatok[munkasNumber - 1]);
} catch (error) {
console.error(`Hiba ${error}`);
}
}
function createDomElement(element) {
let line = document.createElement("div");
line.innerHTML = `Név: ${element.nev}, Beosztás: ${element.beosztas}, Kor: ${element.kor}, Fizetés:${element.fizetes}Ft`;
document.getElementById("eredmeny").appendChild(line);
}

1
24_11_18/munkasok.json Normal file
View File

@ -0,0 +1 @@
[{"nev":"Jani","beosztas":"sofőr","kor":45,"fizetes":300000},{"nev":"Pali","beosztas":"naplopó","kor":37,"fizetes":250000},{"nev":"Laci","beosztas":"vezető","kor":46,"fizetes":380000},{"nev":"Zsolt","beosztas":"főnök","kor":25,"fizetes":3000000},{"nev":"Tihamér","beosztas":"sofőr","kor":30,"fizetes":300000}]

18
24_11_18/tojson.js Normal file
View File

@ -0,0 +1,18 @@
class Munkas {
constructor(nev, beosztas, kor, fizetes){
this.nev = nev;
this.beosztas = beosztas;
this.kor = kor;
this.fizetes = fizetes;
}
}
let munkasok = [];
munkasok.push(new Munkas("Jani", "sofőr", 45, 300000));
munkasok.push(new Munkas("Pali", "naplopó", 37, 250000));
munkasok.push(new Munkas("Laci", "vezető", 46, 380000));
munkasok.push(new Munkas("Zsolt", "főnök", 25, 3000000));
munkasok.push(new Munkas("Tihamér", "sofőr", 30, 300000));
console.log(JSON.stringify(munkasok));