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)文章
JavaScript獲取flash對象與網(wǎng)上的有所不同
關(guān)于js獲取flash對象，網(wǎng)上有非常多的例子，但不是我想要的，經(jīng)測試整理，因此本文誕生了2014-04-04
JS獲取鼠標(biāo)坐標(biāo)、獲取鼠標(biāo)像素點示例
運行代碼之后隨意移動鼠標(biāo)的位置，可適時顯現(xiàn)鼠標(biāo)的坐標(biāo)點，不占用系統(tǒng)資源2014-03-03
下面小編就為大家?guī)硪黄齽t js分轉(zhuǎn)元帶千分符號詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了JS實現(xiàn)含有中文字符串的友好截取功能,結(jié)合實例形式分析了JS針對含有中文的字符串截取操作相關(guān)原理與實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
本篇文章給大家分享一段實例代碼，主要介紹js查看一個函數(shù)的執(zhí)行時間，代碼簡單易懂，感興趣的朋友一起跟著小編來學(xué)習(xí)學(xué)習(xí)吧2015-09-09
Peer.js 構(gòu)建視頻聊天應(yīng)用使用詳解
這篇文章主要為大家介紹了Peer.js 構(gòu)建視頻聊天應(yīng)用使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
我們都知道javascript是一個弱類型語言，在ES5之前，javascript的程序編寫具有很強的隨意性，我可以稱之為懶散模式（sloppy mode）。比如可以使用未定義的變量，可以給對象中的任意屬性賦值并不會拋出異常等等。本文將詳細(xì)介紹javascript中的Strict模式。2021-06-06
js實現(xiàn)prototype擴展的方法(字符串,日期,數(shù)組擴展)
這篇文章主要介紹了js實現(xiàn)prototype擴展的方法,實例分析了JavaScript針對字符串、日期、數(shù)組等的prototype擴展相關(guān)技巧,需要的朋友可以參考下2016-01-01
使用幻燈片效果的網(wǎng)站目前很普遍，本以為很復(fù)雜，實現(xiàn)起來卻發(fā)現(xiàn)很簡單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實現(xiàn)幻燈片效果2013-11-11
Javascript insertAfter() 實現(xiàn)函數(shù)代碼
DOM沒有提供insertAfter()方法，我們可以自己擴展下。2011-10-10