快捷導(dǎo)航

js實(shí)現(xiàn)ajax的用戶簡(jiǎn)單登入功能

更新時(shí)間：2020年06月18日 17:22:21 作者：honghong.zhou

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ajax的用戶簡(jiǎn)單登入功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)ajax的用戶簡(jiǎn)單登入的具體代碼，供大家參考，具體內(nèi)容如下

原生js實(shí)現(xiàn)ajax

html頁(yè)面

<!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;
}
?>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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