首页原生php ajax post_使用原生ajax发送post请求完整案例

原生php ajax post_使用原生ajax发送post请求完整案例

时间: 2023-08-03 10:03:36 浏览: 127

好的，这是一个使用原生 AJAX 发送 POST 请求的完整案例： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>使用原生 AJAX 发送 POST 请求</title> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <h1>使用原生 AJAX 发送 POST 请求</h1> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br><br> <button type="button" id="submit">提交</button> </form> <div id="result"></div> <script src="main.js"></script> </body> </html> ``` JavaScript 代码： ``` document.getElementById("submit").addEventListener("click", function() { var name = document.getElementById("name").value; var email = document.getElementById("email").value; var xhr = new XMLHttpRequest(); xhr.open("POST", "submit.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { document.getElementById("result").innerHTML = this.responseText; } }; xhr.send("name=" + name + "&email=" + email); }); ``` PHP 代码（submit.php）： ``` <?php $name = $_POST["name"]; $email = $_POST["email"]; echo "姓名：" . $name . "<br>邮箱：" . $email; ?> ``` 注意：这个案例使用了 jQuery 库，但是只是为了方便引入 Ajax 库。实际上，这个案例并不需要 jQuery。

阅读全文