ฉันใหม่ใน AJAX และได้เรียนรู้ฟังก์ชันของ jQuery get() และ post() วิธีการเมื่อเร็วๆ นี้ ในขณะที่เมธอด get() ทำงานได้อย่างราบรื่น ฉันสะดุดเมื่อเจอเมธอด post() ซึ่งแสดงข้อผิดพลาดว่า: "405 (ไม่อนุญาตเมธอด)" ทุกครั้งที่ฉันพยายามเรียกใช้
เมื่อใช้ Bootstrap ฉันมีไฟล์ HTML อย่างง่ายชื่อ get_post.html ที่มีองค์ประกอบ div ย่อหน้า และปุ่ม เมื่อใช้ jQuery เมื่อคลิกปุ่ม ฉันจะส่งชื่อและตำแหน่งโดยใช้เมธอด post() ไปยังไฟล์ php ชื่อ mypost.php ซึ่งจะประมวลผลข้อมูลและส่งสตริงข้อความกลับไปที่ get_post.html ฉันต้องการแสดงข้อความสุดท้ายในองค์ประกอบย่อหน้าของ get_post.html ในขณะที่พยายามทำสิ่งนี้ ทุกครั้งที่ฉันคลิกที่ปุ่ม คอนโซลของเบราว์เซอร์จะแสดงข้อความแสดงข้อผิดพลาดที่กล่าวถึงข้างต้น สมมติว่าปัญหาเกี่ยวข้องกับนโยบาย CORS ฉันต้องระบุว่าทั้งไฟล์ get_post.html และ mypost.php อยู่ในโฟลเดอร์เดียวกันภายใต้โดเมนเดียวกัน เหตุใดจึงเป็นข้อผิดพลาดเกี่ยวกับนโยบาย CORS นอกจากนี้ ฉันใช้ Node.js http-server localhost เพื่อเรียกใช้ไฟล์ get_post.html ดังนั้นปัญหาใด ๆ ที่เกี่ยวข้องกับ localhost ก็ไม่น่าเป็นไปได้เช่นกัน นอกจากนี้ ฉันเปิดใช้งานและปิดใช้งาน CORS ขณะเรียกใช้เซิร์ฟเวอร์ http แต่ก็ไม่มีประโยชน์ ฉันลองใช้ IIS ด้วย แต่ปัญหาเดียวกันก็เกิดขึ้นเช่นกัน
แล้วอะไรเป็นสาเหตุของข้อผิดพลาดและฉันจะกำจัดมันได้อย่างไร เนื่องจากฉันยังใหม่กับ AJAX ฉันจึงไม่ค่อยคุ้นเคยกับความซับซ้อนของมันมากนัก โซลูชันออนไลน์ส่วนใหญ่ไม่เกี่ยวข้องกับสถานการณ์ของฉัน ดังนั้นฉันจึงไม่สามารถขอความช่วยเหลือจากพวกเขาได้มากนัก โปรดช่วยแยกแยะสิ่งนี้ด้วยตัวอย่างระดับพื้นฐานหากเป็นไปได้
รหัส get_post.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<p id="loadedData">This is where data will be loaded from server dynamically.</p>
<button class="btnLoad btn btn-primary">Load Data</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".btnLoad").click(function() {
// Fetching data using post() method.
$.post("mypost.php", {
name: "Firstname Lastname",
location: "Countryname"
}, function(data, status) {
$("#loadedData").html(data);
alert(status);
});
});
});
</script>
</body>
</html>
รหัส mypost.php:
<?php
$name = $_POST["name"];
$location = $_POST["location"];
echo "This is ".$name.". I'm from ".$location".";
?>
ขอขอบคุณและขอแสดงความนับถือ!