js實(shí)現(xiàn)ajax的用戶簡單登入功能
更新時(shí)間：2020年06月18日 17:22:21 作者：honghong.zhou
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ajax的用戶簡單登入功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)ajax的用戶簡單登入的具體代碼，供大家參考，具體內(nèi)容如下
原生js實(shí)現(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)建對(duì)象
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 = '用戶名或者密碼錯(cuò)誤';
}else if(data == 2){
document.getElementById('showInfo').innerHTML = '登錄成功';
}
}
};
}
//實(shí)際的去做這件事
//去做這件事情
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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javascript記住用戶名和登錄密碼（兩種方式）
- JSP實(shí)現(xiàn)用戶登錄、注冊和退出功能
- JSP實(shí)現(xiàn)簡單的用戶登錄并顯示出用戶信息的方法
- javascript和jquery實(shí)現(xiàn)用戶登錄驗(yàn)證
- Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能
- vue.js實(shí)現(xiàn)用戶評(píng)論、登錄、注冊、及修改信息功能
- jquery.cookie.js實(shí)現(xiàn)用戶登錄保存密碼功能的方法
- Node.js+Express+MySql實(shí)現(xiàn)用戶登錄注冊功能
- JavaScript 利用Cookie記錄用戶登錄信息
相關(guān)文章
JS數(shù)組reduce你不得不知道的25個(gè)高級(jí)用法
reduce作為ES5新增的常規(guī)數(shù)組方法之一,對(duì)比forEach 、filter和map,在實(shí)際使用上好像有些被忽略，下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組reduce你不得不知道的25個(gè)高級(jí)用法，需要的朋友可以參考下2021-06-06
bootstrap table實(shí)現(xiàn)x-editable的行單元格編輯及解決數(shù)據(jù)Empty和支持多樣式問題
本文著重解決x-editable編輯的數(shù)據(jù)動(dòng)態(tài)添加和顯示數(shù)據(jù)為Empty的問題，還有給表格單元格的內(nèi)容設(shè)置多樣式，使得顯示多樣化,需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了js簡單粗暴的發(fā)布訂閱的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
JavaScript提供了豐富的屬性操作方法,用于操作各種HTML元素,下面這篇文章主要給大家介紹了關(guān)于用js插入HTML元素的相關(guān)資料,文章通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
JS實(shí)現(xiàn)為排序好的字符串找出重復(fù)行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)為排序好的字符串找出重復(fù)行的方法,涉及JavaScript字符串運(yùn)算相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-03-03
window.event.keyCode兼容IE和Firefox實(shí)現(xiàn)js代碼
window.event.keyCode兼容IE和Firefox具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要介紹了JavaScript中setter和getter方法介紹的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了關(guān)于JS中的作用域中的問題思考分享，scope和?closure是?javascript中兩個(gè)非常關(guān)鍵的概念，前者JS用多了還比較好理解而且容易體會(huì)到，而?closure就不一樣了。這玩意是真的很容易迷糊,需要的朋友可以參考下2022-04-04
JavaScript實(shí)現(xiàn)留言板實(shí)戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)留言板的相關(guān)資料,使用JavaScript來編寫留言板功能相信大家都不陌生,文中給出了詳細(xì)的示例代碼,需要的朋友可以參考下2023-07-07
Ajax+FormData+javascript實(shí)現(xiàn)無刷新表單信息提交
在前端開發(fā)中ajax，formdata和js實(shí)現(xiàn)無刷新表單信息提交非常棒，接下來通過本文給大家介紹Ajax+FormData+javascript實(shí)現(xiàn)無刷新表單信息提交的相關(guān)資料,需要的朋友可以參考下2016-10-10