html表单+php（返回执行结果到页面)

HTML部分：login.html

id为resultmessage的span用来显示登录信息验证结果，显示各种失败情况的错误提示；

 <div>
    <span id="resultmessage"></span>
    <input type="text" name="inputtext1" autocomplete="off" placeholder="输入手机号/用户名/邮箱">
    <input type="password" name="inputtext2" autocomplete="off" placeholder="输入密码">
    <input type="submit" name="getinput" value="登录" style="background-color: #bfcbfa;">
  </div>

JQuery部分：可从外部js文件引入login.html，或者直接写在login.html

1、当输入框失去焦点时及时获取输入的数据，点击“登录”触发登录信息验证。
2、url里面写要转到的php和需要传输的数据
3、reg.innerHTML 部分将错误信息显示到span中.
4、settimeout(“javascript:location.href=encodeURI('show.html?data=”+this.responseText+“&name=ni’)”,1000);
设置定时器，在1000毫秒后跳转到show.html信息显示界面，this.responseText为checklogin.php中echo出来的信息。
用encodeURI而不是URI是为了对可能传递的中文数据进行转码，避免中文乱码.

 <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
  <script>
     document.body.style.overflow='hidden';
      var username = '';
      var password = '';
      $("input[name='inputtext1']")[0].onblur = function () {
        username =  $("input[name='inputtext1']")[0].value;
      }
      $("input[name='inputtext2']")[0].onblur = function () {
        password =$("input[name='inputtext2']")[0].value;
      }
      $("input[name='getinput']")[0].onclick = function () {
        var url = 'checklogin.php?username=' + username + '&password=' + password;
        var reg = document.getElementById('resultmessage');
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (this.readyState == 4) {
            // alert('请求成功');
            if (this.responseText == 0) {
              reg.innerHTML = '<font color="red">请您输入手机/邮箱/用户名</font>';
            } else if (this.responseText == 1) {
              reg.innerHTML = '<font color="red">请您输入密码</font>'
            } else if (this.responseText == 2) {
              reg.innerHTML = '<font color="red">账户密码错误</font>'
            } else if (this.responseText == 3) {
              reg.innerHTML = '<font color="red">账户不存在，请先注册或重新输入</font>'
            }else if (this.responseText == 4){
                reg.innerHTML = '<font color="red">暂无用户账号信息</font>'
            }else {
               //跳转到另一个页面，encodeURI相较URI可对中文转码
              setTimeout("javascript:location.href=encodeURI('show.html?data="+this.responseText+"&name=ni')", 1000);
            }
          }
        }
        xhr.open('get', url, true);
        xhr.send(null);
      }
  </script>

PHP部分：checklogin.php

1、get方式获取传递过来的参数信息，通过goto语句跳转到需要执行的程序位置
2、连接数据库的步骤：
参数分别为域名、数据库账户名、账户密码、数据库名称

$db=mysqli_connect(“localhost”,“root”,“123456”,“baidu”);

根据需要书写sql语句，例如：

$sql=“select username,password from usermessages”;

获取查询结果集：

$result=$db->query($sql);

判断结果集是否为空

if($result->num_rows>0)

遍历结果集，$row[‘username’]获取结果集中数据库中名为username的参数数据.

while($row = $result->fetch_assoc()) {

var name=$row[‘username’];

}

返回结果，该结果为JQuery能获取的信息

last: echo $message;

3、

<?php
  $username=$_GET['username'];
  $password=$_GET['password'];
  if (empty($username)) {
    $message = 0;
    goto last;
  } if (empty($password)) {
    $message = 1;
    goto last;
  } else {
    goto check;   
  }

  check: $db=mysqli_connect("localhost","root","123456","baidu");
         if($db){
           $sql="select username,password from usermessages";
           $result=$db->query($sql);
           if($result->num_rows>0){
            while($row = $result->fetch_assoc()) {
              if($username==$row['username']){
                if($password==$row['password']){
                  if($username=='yunban'){
                    $message='欢迎您，云瓣科技';
                  }else if($username=='chinash'){
                    $message='欢迎您，大上海';
                  }else{
                    $message='欢迎您，'.$row['username'];
                  }
                }else{
                   $message=2;
                }
                break;
              }else{
                $message=3;
              }
            }
            goto last;
          }else{
            $message=4;
            goto last;
          }
        }
        else{
          $message=3;
          goto last;
        }  
              
  last: echo $message;
 
?>

登录成功显示界面：show.html

先对header中携带的参数进行获取和分割得到一个数组，0/2/4…为参数名称，1/3/5…为参数值.

decodeURI(datas[1]);

decodeURI对将要显示的数据进行转码，避免中文无法正常显示

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>欢迎进入您的百度世界</title>
  <style>
    div{
      box-sizing: border-box;
      position: relative;
      display: block;
      width: 300px;
      height: 100px;
      margin: 0 auto;
      top: 50%;
      text-align: center;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="me">
 </div>
   <script>
     var message=this.location.search;
     var datas={};
     if(message.indexOf("?")!=-1){
       var str=message.replace("?","");
       var strs=str.split("&");
       for(var i=0;i<strs.length;i++){
         datas[2*i]=strs[i].split("=")[0];
         datas[2*i+1]=strs[i].split("=")[1];
       }
     }
    //  alert(datas[0]);
    //  alert(datas[1]);
    //  alert(datas[2]);
    //  alert(datas[3]);
     document.getElementById("me").innerHTML = decodeURI(datas[1]);
   </script>
</body>
</html>