get request
GET request means "URL" or data. The message of GET request is empty, so our send is null. If the open of our GET request requires parameters, it must be achieved by concatenating strings
xhr.open("get","info.php?id="+txt.value, true);Small case
<!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 request
For POST requests, no parameters are written in the URL, and everything is handed over to the message to transmit the data. Therefore, the open of the POST request does not need to splice the string, and the send will have data transmission
The data of the post request is spliced by & when submitted, but the POST request parameter is in formData, the internal data is a k:v state, how to convert
timu1=很好&timu2=正常&timu3=阿斯蒂芬Set the message header information and perform conversion
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
Write a questionnaire survey case
.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)
?>