Rumah hujung hadapan web tutorial js ajax实现登录功能的图文详解

ajax实现登录功能的图文详解

Apr 02, 2018 am 11:56 AM
ajax Fungsi Grafik dan teks

这次给大家带来ajax实现登录功能的图文详解,ajax实现登录功能的注意事项有哪些,下面就是实战案例,一起来看一下。

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

ajax的优点:

1、最大的一点是页面无刷新,用户的体验非常好。

2、使用异步方式与服务器通信,具有更加迅速的响应能力。。

3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

5、ajax可使因特网应用程序更小、更快,更友好。

这里我用ajax写一个简单的登录页面:首先用到的是数据库login的表,

下面是登录页面的代码,首先要引入jquery包

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <script src="jquery-3.1.1.min.js"></script> /*引入jquery包*/
</head>
<body>
<h2>登录页面</h2>
<p>用户名:<input type="text" id="uid"/></p>
<p>密码:<input type="text" id="pwd"/></p>
<p><input type="button" id="btn"value="登录"/></p>11</body>12</html>
Salin selepas log masuk

登录页面很简单,就不上图了,之前的博客也写过很多次了

然后下面就是ajax的写法了

<script type="text/javascript">
$("#btn").click(function(){
 //第一步:取数据,这里用到了用户名和密码
  var uid=$("#uid").val();
  var pwd=$("#pwd").val();
  //第二步:验证数据,这里需要从数据库调数据,我们就用到了ajax
  $.ajax({
    url:"dlchuli.php",//请求地址
    data:{uid:uid,pwd:pwd},//提交的数据
    type:"POST",//提交的方式
    dataType:"TEXT", //返回类型 TEXT字符串 JSON XML
    success:function(data){
   //开始之前要去空格,用trim()
      if(data.trim()=="OK")
      {
        window.location.href = "main.php";
      }
      else{
       alert("用户名或者密码错误");
      }
    }
  })
})
</script>
Salin selepas log masuk

dlchuli.php的代码写法如下:

<?php
include("DADB.class.php");
$db=new DADB();
$uid=$_POST["uid"];
$pwd=$_POST["pwd"];
$sql="select password from login where username='{$uid}'";
$arr=$db->Query($sql);
if($arr[0][0]=$pwd && !empty($pwd))
{
  echo"OK";
}
else{
  echo"NO";
}
?>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样用ajax实现弹窗登录

Ajax+bootstrap优化网页用户体验的步奏

Atas ialah kandungan terperinci ajax实现登录功能的图文详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah fungsi apl Doubao? Apakah fungsi apl Doubao? Mar 01, 2024 pm 10:04 PM

Apakah fungsi apl Doubao?

Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi Mar 23, 2024 pm 10:27 PM

Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi

Apa itu Discuz? Definisi dan pengenalan fungsi Discuz Apa itu Discuz? Definisi dan pengenalan fungsi Discuz Mar 03, 2024 am 10:33 AM

Apa itu Discuz? Definisi dan pengenalan fungsi Discuz

Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya? Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya? Mar 21, 2024 pm 08:21 PM

Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya?

Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya Mar 09, 2024 am 08:21 AM

Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya

Apakah fungsi perisian pengurusan akaun Xiaohongshu? Bagaimana untuk mengendalikan akaun Xiaohongshu? Apakah fungsi perisian pengurusan akaun Xiaohongshu? Bagaimana untuk mengendalikan akaun Xiaohongshu? Mar 21, 2024 pm 04:16 PM

Apakah fungsi perisian pengurusan akaun Xiaohongshu? Bagaimana untuk mengendalikan akaun Xiaohongshu?

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Mar 09, 2024 pm 05:36 PM

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?

Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux Mar 01, 2024 pm 04:18 PM

Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux

See all articles