abstract:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生Ajax: 表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生Ajax: 表单验证</title> </head> <body> <form> <p>邮箱:<input type="email" name="email" value="admin@155.com"></p> <p>密码:<input type="password" name="password"></p> </form> <p><button onclick="check()" type="button">登录</button></p> <P id="tips"></P> </body> </html> <script> function check(){ var forms = document.forms[0]; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var obj = JSON.parse(xhr.responseText); if(obj.code == 0){ document.getElementById('tips').style.color = 'blue'; document.getElementById('tips').innerHTML = obj.msg; } if(obj.code == 1){ document.getElementById('tips').style.color = 'red'; document.getElementById('tips').innerHTML = obj.msg; } } } xhr.open('post','check.php',true); xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); var data = 'email='+forms.email.value+'&password='+forms.password.value; xhr.send(data); } </script>
Correcting teacher:天蓬老师Correction time:2019-03-28 17:07:11
Teacher's summary:写得不错嘛, 现在还能写好这些原生代码的人不多了,辛苦了