js實現(xiàn)ajax的用戶簡單登入功能
更新時間：2020年06月18日 17:22:21 作者：honghong.zhou
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)ajax的用戶簡單登入功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)ajax的用戶簡單登入的具體代碼，供大家參考，具體內(nèi)容如下
原生js實現(xiàn)ajax
html頁面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax登錄</title>
</head>
<body>
<div>
<div id="showInfo"></div>
<form id="form">
用戶名：<input type="text" name="username" id="username"><br>
密碼：<input type="password" name="password" id="password">
<input type="button" id="btn" value="登錄">
</form>
</div>
<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;
//第一步：創(chuàng)建對象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//初始化
//準(zhǔn)備好了
var url = './check.php?username='+username+"&password="+password;
xhr.open('post',url,false);
//這段代碼在xhr.send();執(zhí)行完之后才能執(zhí)行
//這件事做完了怎么辦
//事情辦完之后干什么
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(1);
var data = xhr.responseText;
if(data == 1){
document.getElementById('showInfo').innerHTML = '用戶名或者密碼錯誤';
}else if(data == 2){
document.getElementById('showInfo').innerHTML = '登錄成功';
}
}
};
}
//實際的去做這件事
//去做這件事情
xhr.send(null);
alert(2);
}
}
</script>
</body>
</html>
check.php
<?php
$username = $_GET['username'];
$password = $_GET['password'];
if($username == 'admin' && $password == '123'){
echo 2;
}else{
echo 1;
}
?>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
reduce作為ES5新增的常規(guī)數(shù)組方法之一,對比forEach 、filter和map,在實際使用上好像有些被忽略，下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組reduce你不得不知道的25個高級用法，需要的朋友可以參考下2021-06-06
bootstrap table實現(xiàn)x-editable的行單元格編輯及解決數(shù)據(jù)Empty和支持多樣式問題
本文著重解決x-editable編輯的數(shù)據(jù)動態(tài)添加和顯示數(shù)據(jù)為Empty的問題，還有給表格單元格的內(nèi)容設(shè)置多樣式，使得顯示多樣化,需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了js簡單粗暴的發(fā)布訂閱的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
JavaScript提供了豐富的屬性操作方法,用于操作各種HTML元素,下面這篇文章主要給大家介紹了關(guān)于用js插入HTML元素的相關(guān)資料,文章通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
JS實現(xiàn)為排序好的字符串找出重復(fù)行的方法
這篇文章主要介紹了JS實現(xiàn)為排序好的字符串找出重復(fù)行的方法,涉及JavaScript字符串運算相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-03-03
window.event.keyCode兼容IE和Firefox實現(xiàn)js代碼
window.event.keyCode兼容IE和Firefox具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要介紹了JavaScript中setter和getter方法介紹的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了關(guān)于JS中的作用域中的問題思考分享，scope和?closure是?javascript中兩個非常關(guān)鍵的概念，前者JS用多了還比較好理解而且容易體會到，而?closure就不一樣了。這玩意是真的很容易迷糊,需要的朋友可以參考下2022-04-04
JavaScript實現(xiàn)留言板實戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)留言板的相關(guān)資料,使用JavaScript來編寫留言板功能相信大家都不陌生,文中給出了詳細(xì)的示例代碼,需要的朋友可以參考下2023-07-07
Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交
在前端開發(fā)中ajax，formdata和js實現(xiàn)無刷新表單信息提交非常棒，接下來通過本文給大家介紹Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交的相關(guān)資料,需要的朋友可以參考下2016-10-10