什么库都不用 ,发一个原生的ajax
时间: 2024-02-22 22:55:26 浏览: 17
好的,这是一个使用原生 AJAX 发送 POST 请求的完整案例,不需要使用任何库:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>使用原生 AJAX 发送 POST 请求</title>
<meta charset="UTF-8">
</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;
?>
```
在这个案例中,我们使用了原生 JavaScript 来发送 AJAX 请求。我们创建了一个 XMLHttpRequest 对象,使用 open() 方法指定请求的方法、URL 和是否异步执行,设置请求头,发送 POST 请求,最后在 onreadystatechange 事件中处理响应。注意,我们没有使用任何库或框架。