< 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”;

获取查询结果集:

$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">
  <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>
  <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>
                    HTML部分:login.htmlid为resultmessage的span用来显示登录信息验证结果,显示各种失败情况的错误提示; &lt;div&gt;    &lt;span id="resultmessage"&gt;&lt;/span&gt;    &lt;input type="text" name="inputtext1" autocomplete="off" placeholder="输入手机号/用户名/邮箱"&gt;    &lt;input type="password" nam
				
从Web查询数据库:Web数据库架构的工作原理 一个用户的浏览器发出一个HTTP请求,请求特定的Web页面,在该页面中出发form表单提交到php脚本文件(如:results.php)中处理 Web服务器接收到对results.php页面的请求后,检索文件,并将其传递给PHP引擎处理 PHP引擎开始解析脚本。脚本主要包括了连接数据库和执行查询的命令。PHP启动了对MySQL服务器的连接并向该服务器发送适当的查询。 MySQL服务器接收到数据库查询的请求,开始处理这个查询,并将查询结果返回PHP引擎。 PHP引擎完成了脚本的运行后,将该HTML返回Web服务器。 Web服务器再将HTML返回
目录html代码php文件代码还得在vscode上的php配置以及php环境搭建基于PhpStudy完成web配置登录数据库mysql的table准备将html文件和php文件项目放入WWW文件夹下跨域问题以及解决方案 HTML是无法读取数据库的,HTML页面前端脚本语言,要想从HTML网页中获取SQL数据库里的数据,需要借助JSP或ASP或PHP或RUBY等语言来实现。 简单的关系可以这样理解: 数据库<—>JSP或ASP或PHP或RUBY等语言<—>HTML 这里我们选取php
帮女朋友做作业,需要用xampp实现网站建设,要求建立后台数据库、使用PHP实现页面查询、页面内容更新等功能。 本人自查自学,使用了较多的基础知识点,在此处记录下。 以下涉及数据库连接、数据库查询、数据库字段设置、文件跳转、文件变量请自行根据自己情况进行设置。 代码仅实现登录、连接数据库、数据库查询等核心功能,页面美化功能部分代码不在此处展示。如有需要请自行进行美化。 代码文件1:HTML登录界面代码 <title>Logi <%@page import="java.util.ArrayList"%> <%@page import="java.util.List"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/c
刚遇到一个需求:做一个页面,获取物流信息数据渲染到页面上,后台之后会通过页面地址将页面截图返回图片文件,这这这,后面的实现由有点蒙,咱萌新就负责搞个页面渲染数据吧…… 页面元素很简单,就这点;注意引入 jquery,我用 cdn 的方式引入的 <!DOCTYPE html> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" .
var xhr = new XMLHttpRequest(); xhr.open("POST", "submit.php"); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 处理服务器返回的响应数据 // ... xhr.send(new FormData(form)); 5. 最后记得在表单提交的代码中返回false,以确保表单不会跳转页面,例如: return false;