Fetch használata

2026-09-14 11:56:04 +02:00
parent d54a708d42
commit f042cd8f17
2 changed files with 97 additions and 0 deletions
--- a/ajax/ajax.js
+++ b/ajax/ajax.js
@@ -0,0 +1,81 @@
+let keres=new XMLHttpRequest();
+let valasz="";
+
+let root=document.getElementById('root');
+
+keres.open('GET','https://jsonplaceholder.typicode.com/posts',true);
+
+keres.onload=function(){
+    valasz=JSON.parse(this.response);
+    console.log(valasz);
+    valasz.forEach(elem=>{
+        let cim=document.createElement('p');
+        let hozzaszolas=document.createElement('p');
+
+        cim.textContent=elem.title;
+        hozzaszolas.textContent=elem.body;
+
+        root.appendChild(cim);
+        root.appendChild(hozzaszolas);
+    });
+
+}
+
+//keres.send();
+
+//??
+console.log(valasz);
+
+// fetch('https://jsonplaceholder.typicode.com/posts')
+// .then(res=>res.json())
+// .then(posts=>{
+//     if(Array.isArray(posts)){
+//         posts.forEach(post=>{
+//         let cim=document.createElement('p');
+//         let hozzaszolas=document.createElement('p');
+
+//         cim.textContent=post.title;
+//         hozzaszolas.textContent=post.body;
+
+//         root.appendChild(cim);
+//         root.appendChild(hozzaszolas);
+//         });
+//     } else {
+//         let p=document.createElement('p');
+//         p.textContent="Nincsenek adatok"
+//     }
+// })
+// .catch(err=>alert(err));
+
+async function letoltes() {
+    try {
+        let keres=await fetch('https://jsonplaceholder.typicode.com/posts');
+        let valasz=await keres.json();
+
+        if(Array.isArray(valasz)){
+
+            valasz.forEach(post=>{
+             let cim=document.createElement('p');
+             let hozzaszolas=document.createElement('p');
+
+             cim.textContent=post.title;
+             hozzaszolas.textContent=post.body;
+
+             root.appendChild(cim);
+             root.appendChild(hozzaszolas);
+
+            })
+
+             
+        } else {
+             let p=document.createElement('p');
+             p.textContent="Nincsenek adatok"
+        }
+        
+    } catch (error) {
+        let p=document.createElement('p');
+        p.textContent=error
+    }    
+}
+
+letoltes();
--- a/ajax/index.html
+++ b/ajax/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API használat</title>
+    <script defer src="ajax.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+</head>
+<body>
+    <div id="root">
+
+    </div>
+    
+</body>
+</html>