在使用ajax提交表单时，一定要区分提交按钮的形式和数据表头的设置，实例如下：
GET请求：
HTML代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生ajax-状态值得含义</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById('btn');
btn.onclick = function() {
var username = document.getElementById("username").value;
var password = document.getElementById('password').value;
//第一步：创建xhr对象
var xhr = null;
if(window.XMLHttpRequest) { //标准浏览器
xhr = new XMLHttpRequest();
} else { //早期的IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} //第二步：准备发送请求-配置发送请求的一些行为
//var url = '05open.php?username=' + encodeURIComponet(username) + '&password=' + password; var url = '05open.php?username='+username+'&password='+password;
xhr.open('get', url,true);
//第三步：执行发送的动作 var param = 'username=' + username + '&password=' + password;
xhr.send(null);
//第四步：指定一些回调函数
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var data = xhr.responseText; //json
console.log(data);
// var data1 = xhr.responseXML;
}
}
}
}
}
</script>
</head> <body>
<div>
<div id="showInfo"></div>
<form>
用户名：<input type="text" name="username" id="username"><br> 密码：
<input type="password" name="password" id="password"><br>
<!--<input type="button" value="提交" id="btn">-->
<input type="submit" value="提交" id="btn">
</form>
</div>
</body>
</html>
php代码：
<?php $username = $_GET['username'];
$password = $_GET['password']; // $username = $_POST['username'];
// $password = $_POST['password'];
// echo 1; echo '用户名：'.$username.'密码：'.$password; ?>
提交按钮采用
<input type="submit" value="提交" id="btn">
提交后的结果是：
提交按钮采用
<input type="button" value="提交" id="btn">
提交后的结果是：
POST请求：
HTML代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生ajax-状态值得含义</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById('btn');
btn.onclick = function() {
var username = document.getElementById("username").value;
var password = document.getElementById('password').value;
//第一步：创建xhr对象
var xhr = null;
if(window.XMLHttpRequest) { //标准浏览器
xhr = new XMLHttpRequest();
} else { //早期的IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} //第二步：准备发送请求-配置发送请求的一些行为
//var url = '05open.php?username=' + encodeURIComponet(username) + '&password=' + password; //var url = '05open.php?username='+username+'&password='+password;
var url='05open.php';
xhr.open('post', url,true);
//第三步：执行发送的动作 var param = 'username=' + username + '&password=' + password;
xhr.send(param);
//第四步：指定一些回调函数
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var data = xhr.responseText; //json
console.log(data);
// var data1 = xhr.responseXML;
}
}
}
}
}
</script>
</head> <body>
<div>
<div id="showInfo"></div>
<form>
用户名：<input type="text" name="username" id="username"><br> 密码：
<input type="password" name="password" id="password"><br>
<input type="button" value="提交" id="btn">
</form>
</div>
</body>
</html>
php代码：
<?php //$username = $_GET['username'];
//$password = $_GET['password']; $username = $_POST['username'];
$password = $_POST['password']; echo '用户名：'.$username.'密码：'.$password; ?>
执行结果：
这是没有设置头文件的原因：
头文件设置如下：
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
设置后执行如下：
