samples for AJAX GET and POST requests with Fetch API

DeveloppeurPascal · DeveloppeurPascal · commit fa7a6c8ad4fc · 2022-10-25T22:07:41.000+02:00
diff --git a/Web-Fetch-API-Get/index.html b/Web-Fetch-API-Get/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Web Fetch API for a GET request</title>
+</head>
+<body>
+<div id="books"></div>
+<script>
+    // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+
+    fetch('http://localhost/PHP-Dump/src/ajaxcalldump.php?key1=value1&key2=value2',{
+		method: 'GET'
+	}).then((reponse) => {
+        // console.log(reponse);
+        if (reponse.ok) {
+            reponse.json().then((json) => {
+                console.log(json);
+			})
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/Web-Fetch-API-Post/index.html b/Web-Fetch-API-Post/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Web Fetch API for a POST request</title>
+</head>
+<body>
+<div id="books"></div>
+<script>
+    // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+
+    fetch('http://localhost/PHP-Dump/src/ajaxcalldump.php',{
+		method: 'POST',
+		headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+		body: 'key1=value1&key2=value2'
+	}).then((reponse) => {
+        // console.log(reponse);
+        if (reponse.ok) {
+            reponse.json().then((json) => {
+                console.log(json);
+			})
+        }
+    });
+</script>
+</body>
+</html>
