get请求
GET请求，就是“URL”即数据，GET请求的报文是空的，所以我们的send为null。如果我们的GET请求的open需要参数一定要通过拼接字符串来实现
xhr.open("get","info.php?id="+txt.value, true);小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="txt">
<button id="btn">提交</button>
<div id="box"></div>
<script>
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function () {
//创建请求对象
var xhr = new XMLHttpRequest();
//配置请求对象
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
box.innerHTML = xhr.responseText
}
}
//使用get 请求，请求路径info.php,是否异步
xhr.open("get","info.php?id="+txt.value,true);
//发送请求
xhr.send(null)
}
</script>
</body>
</html>info.php
<meta charset='utf-8'>
<?php
$arr = array(
"10001" => array("name"=>"小明","age"=>18,"sex"=>"男","height"=>"165","weight"=>62),
"10002" => array("name"=>"小白","age"=>19,"sex"=>"女","height"=>"175","weight"=>70),
"10003" => array("name"=>"小虎","age"=>20,"sex"=>"男","height"=>"180","weight"=>75),
"10004" => array("name"=>"小黑","age"=>21,"sex"=>"女","height"=>"160","weight"=>55),
"10005" => array("name"=>"小刘","age"=>22,"sex"=>"男","height"=>"168","weight"=>65),
);
//获取用户输入的学号ID
$id = $_GET["id"];
?>
<h1>
<?php echo $id ?>
</h1>
<ul>
<li><?php echo $id ?></li>
<li><?php echo $arr[$id]['name'] ?></li>
<li><?php echo $arr[$id]['age'] ?></li>
<li><?php echo $arr[$id]['sex'] ?></li>
<li><?php echo $arr[$id]['height'] ?></li>
<li><?php echo $arr[$id]['weight'] ?></li>
</ul>
post 请求
POST请求，URL中不在写参数，一切交给报文去传输数据。所以POST请求的open，不需要拼接字符串，send会有数据传输
post请求的数据提交的时候是用 & 符合拼接起来的，但是POST请求参数是在formData中，内部是数据是一个k:v状态，如何转换
timu1=很好&timu2=正常&timu3=阿斯蒂芬设置报文头信息，进行转换
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
写个问卷调查小案例
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>学生问卷调查</h1>
<form>
<p>题目1：目前的学习情况</p>
<label>
<input type="radio" name="timu1" value="很好">很好
</label>
<label>
<input type="radio" name="timu1" value="较好">较好
</label>
<label>
<input type="radio" name="timu1" value="一般">一般
</label>
<label>
<input type="radio" name="timu1" value="较差">较差
</label>
<label>
<input type="radio" name="timu1" value="很差">很差
</label>
<p>题目2：目前的学习进度</p>
<label>
<input type="radio" name="timu2" value="很快">很快
</label>
<label>
<input type="radio" name="timu2" value="较快">较快
</label>
<label>
<input type="radio" name="timu2" value="一般">一般
</label>
<label>
<input type="radio" name="timu2" value="较快">较快
</label>
<label>
<input type="radio" name="timu2" value="很快">很快
</label>
<p>题目3：有什么建议</p>
<p>
<textarea name="timu3" cols="30" rows="10" id="area"></textarea>
</p>
<p>
<input type="button" id="btn" value="提交参数">
</p>
</form>
<script>
var btn = document.getElementById("btn");
var timu1s = document.getElementsByName("timu1");
var timu2s = document.getElementsByName("timu2");
var timu3s = document.getElementById("area");
btn.onclick = function () {
for (var i = 0; i < timu1s.length; i++) {
if (timu1s[i].checked) {
var timu1 = timu1s[i].value
}
}
for (var i = 0; i < timu2s.length; i++) {
if (timu2s[i].checked) {
var timu2 = timu2s[i].value
}
}
var timu3 = timu3s.value;
var subStr = "timu1=" + timu1 + "&timu2=" + timu2 + "&timu3=" + timu3
//console.log(subStr)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.responseText == "SUCCESS") {
alert("提交成功")
} else if (xhr.responseText == "ERROR") {
alert("提交失败")
}
}
}
xhr.open("post", 'postform.php', true);
//报文头设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(subStr)
}
</script>
</body>
</html>postform.php
<?php
//获取报文头
$timu1 = $_POST["timu1"];
$timu2 = $_POST["timu2"];
$timu3 = $_POST["timu3"];
// 链接数据库：需要链接的服务器，用户名和密码
$connect = mysql_connect("localhost", "root", 123456);
// 选择哪个数据库
mysql_selectdb("xiaobai");
// 设置字符集
mysql_query("SET NAMES UTF8");
// 向对应的数据库插入数据
$sql = "INSERT INTO student (timu1,timu2,timu3) VALUES('{$timu1}','{$timu2}','{$timu3}')";
//查询数据库中的数据
//$sql = "SELECT * FROM form";
//执行命令
mysql_query($sql);
$result = mysql_query($sql);
if($result == 1){
echo "SUCCESS";
}else {
echo "ERROR";
}
mysql_close($connect)
?>