什么库都不用 ,发一个原生的ajax,get请求
时间: 2024-01-21 10:05:07 浏览: 30
好的,这是一个使用原生 AJAX 发送 GET 请求的完整案例,不需要使用任何库:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>使用原生 AJAX 发送 GET 请求</title>
<meta charset="UTF-8">
</head>
<body>
<h1>使用原生 AJAX 发送 GET 请求</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("GET", "submit.php?name=" + name + "&email=" + email, true);
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
document.getElementById("result").innerHTML = this.responseText;
}
};
xhr.send();
});
```
PHP 代码(submit.php):
```
<?php
$name = $_GET["name"];
$email = $_GET["email"];
echo "姓名:" . $name . "<br>邮箱:" . $email;
?>
```
在这个案例中,我们使用了原生 JavaScript 来发送 AJAX 请求。我们创建了一个 XMLHttpRequest 对象,使用 open() 方法指定请求的方法、URL 和是否异步执行,将参数添加到 URL 中,最后在 onreadystatechange 事件中处理响应。注意,我们没有使用任何库或框架。