💻 Full Working Code
📁 index.html
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<title>Headers na Request Options - Faulink</title>
<style>
body { font-family: Arial; background: #f8f9fa; padding: 40px; text-align: center; }
button { padding: 10px 20px; background: #17a2b8; color: white; border: none; border-radius: 6px; cursor: pointer; }
#output { margin-top: 20px; background: white; padding: 20px; border-radius: 10px; width: 300px; display: inline-block; }
</style>
</head>
<body>
<h2>🧾 Kutumia Headers na Request Options</h2>
<button id="sendBtn">Tuma Request</button>
<div id="output">Hakuna majibu bado...</div>
<script>
document.getElementById("sendBtn").onclick = function(){
fetch("headers.php", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Custom-Header": "Faulink-Learning"
},
body: JSON.stringify({jina: "Faustine", somo: "PHP na AJAX"})
})
.then(res => res.text())
.then(data => document.getElementById("output").innerHTML = data)
.catch(err => document.getElementById("output").innerHTML = "❌ Error: " + err);
};
</script>
</body>
</html>
📁 headers.php
<?php
header("Content-Type: text/plain");
$input = json_decode(file_get_contents("php://input"), true);
$jina = $input['jina'] ?? 'Haijapokelewa';
$somo = $input['somo'] ?? 'Haijapokelewa';
echo "✅ Majibu kutoka Server:\n";
echo "Jina: $jina\n";
echo "Somo: $somo\n";
?>
________________________________________
🎥 YouTube Description
Unapofanya requests kwa Fetch API, unaweza kuongeza Headers na Options ili kudhibiti jinsi data inavyotumwa.
Katika somo hili tumeonyesha jinsi ya kutumia “Custom Headers” na JSON body.
💡 Hii ni muhimu sana kwenye authentication, API calls, na secure data communication.
________________________________________
🏷️ Hashtags
#FetchAPI #Headers #AJAX #PHP #JavaScript #Faulink #WebDevelopment #APIs #Coding