如何在表单中使用Ajax

1、HTML就是一个简单表单验证，有登录按钮，点击登录会发送Ajax，

这里就是简单如果用户名为：zhouzhiruo，密码为：123456,就是登录成功，否则登录失败

应该在发送请求之前对input的value做验证是否符合标准

<form id="myform" name="myform" action="03.php" method="post">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="user" name="user"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="pwd" name="pwd"></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btn" value="登录"></td>
</tr>
</table>
</form>

2、JS

//使用Ajax时候不要用subbmit
var btn=document.getElementById("btn");
btn.onclick=function(){
var xhr=getXhr();
xhr.open('post','03.php');
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var user=document.getElementById("user").value;
var pwd=document.getElementById("pwd").value;
xhr.send("user="+user+"&pwd="+pwd);
xhr.onreadystatechange=function(){
//获得服务器端当前状态
//alert(xhr.readyState);
//保证响应完成
if(xhr.readyState==4){
//保证这次请求必须成功
//alert(xhr.status);
if(xhr.status==200){
//接收服务器端的数据
var data=xhr.responseText;
//测试
console.log(data);
}
}
}
};
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}

3、PHP，链接数据库的语言之一

<?php
$user=$_POST['user'];
$pwd=$_POST['pwd'];
if($user=="zhouzhiruo"&$pwd==
"123456"){
echo "login successful";
}else{
echo "login error";
}
?>