Home > Article > Web Front-end > Ajax basics and login tutorial

Ajax basics and login tutorial

亚连Original: 2018-05-22 15:56:191064browse

Ajax is the abbreviation of Asynchronous JavaScript and XML. Its advantages can reduce the burden on the server, obtain data on demand, and minimize redundant requests. Next, I will introduce the basics of Ajax and login tutorial through this article. Friends who need it can refer to it

Ajax is the abbreviation of Asynchronous JavaScript and XML.

Advantages of Ajax:

Advantages: reduce the burden on the server, fetch data on demand, and minimize redundant requests

Partially refresh the page, reduce user psychology and actual waiting time, and bring better user experience

Based on xml standardization and widely supported, no need to install plug-ins, etc.

Further Facilitate the separation of pages and data

Ajax includes the following technologies:

Based on web standards (standards-based presentation)XHTML CSS representation;

Use DOM (Document Object Model) for dynamic display and interaction;

Use XML and XSLT for data exchange and related operations;

Use XMLHttpRequest for asynchronous data query and retrieval;

Use JavaScript to tie everything together.

In other words, the biggest feature of Ajax is that it can achieve dynamic without refreshing

Using Ajax:

Example:

A table in the database:

Click to see if the user name is available:

Main page code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.2.min.js"></script>
  </head>
  <body>
    输入一个用户名：<input type="text" id="zhang" />
    <span id="tishi"></span>
  </body>
</html>
<script>
  //给文本框加上事件
  $("#zhang").blur(function(){
    //1取内容
    var zhang = $(this).val();
    //val取到表单元素、给变量
    //2将取到的内容内容区数据库验证
    //调用Ajax
    $.ajax({
      type:"POST",
      //提交方式
      url:"chuli.php",
      //请求哪一个php文件（请求地址）
      data:{yhm:zhang},
      //给zhang取名yhm，传过去，是一个json
      //请求处理页面需不需要传数据过去，不需要传不用写
      dataType:"TEXT",
      //处理页面返回的类型:TEXT字符串 JSON,JSON，XML，只有三种类型
      success:function(data){
        //回调函数
//        data为返回的值
        //成功之后要调用的函数
        if(data==0)
        {
          //如果为0
          $("#tishi").text("该用户名为0；可用！");
          $("#tishi").css("color","green");
        }
        else
        {
          $("#tishi").text("该用户名已存在；不可用！");
          $("#tishi").css("color","brown");
        }
      }
    });
    //3给出提示
  })
</script>

Next, do the processing page:

<?php
$zhang = $_POST["yhm"];
//取值
include("db.class.php");
$db = new db();
$sql = "select count(*) from mydb where zhang = &#39;{$zhang}&#39;";
$arr = $db->Query($sql);
echo $arr[0][0];
//直接输出相当于返回
?>

Picture:

Enter an existing username:

Enter a non-existing username:

Write another login:

Code for the login page:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>登入页面</h1>
<p>帐号<input type="text" id="zhang"/></p>
<p>密码<input type="text" id="mi"/></p>
<input type="button" id="btn" value="登入"/>
</body>
</html>
<script>
  $("#btn").click(function(){
    //1取数据
    var zhang = $("#zhang").val();
    var mi = $("#mi").val();
    //2验证数据
    $.ajax({
      url:"drcl.php",
      data:{zhang:zhang,mi:mi},
      type:"POST",
      dataType:"TEXT",
      success:function (data) {
        //回调函数
        //判断返回值
        if(data=="ok")
        {
          window.location.href = "zym.php";
        }
        else
        {
          alert("用户名或密码错误");
        }
      }
    });
    //提示
  })
</script>

Next is the login processing page:

<?php
include ("db.class.php");
$db = new db();
$zhang = $_POST["zhang"];
$mi = $_POST["mi"];
//取值
$sql = "select mi from mydb WHERE zhang = &#39;{$zhang}&#39;";
$arr = $db->Query($sql);
if($arr[0][0]==$mi && !empty($mi))
{
  echo "ok";
}
else
  {
    echo "no";
  }
?>

Take a look at the picture. If the input is incorrect, it will prompt directly on this page:

If the input is correct, it will jump:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Three major ways to handle cross-domain processing in jquery ajax (graphic tutorial)

ImplementationajaxGet cross-domain data (graphic tutorial)

ajaxSet contentType: "application/ The role of json" (graphic tutorial)

The above is the detailed content of Ajax basics and login tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Ajax bootstrap beautifies web pages and enables page loading, deletion and viewing detailsNext article：Ajax bootstrap beautifies web pages and enables page loading, deletion and viewing details

See more

Ajax basics and login tutorial

Related articles