ajax

执行步骤

// 步骤

设置事件 调用函数

  1. 创建一个XHR对象
  2. 打开ajax通道，链接服务器，配置请求信息和参数
  3. 发送数据
  4. 设置回调函数
  5. 服务器接受请求，处理请求，查询数据库，响应 及 返回数据
  6. 回调函数接受数据，执行回调函数
  7. 回调函数中 更新页面。

　　示例：

　　　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>表单</title>

</head>

<body>

    <form action="login" method="get">

        <h1>登陆</h1>

        用户名：<input type="text" name="userName" onblur="checkUser()">

        <span id="msg"></span>

        密码：<input type="password" name="pwd">

        <input type="submit">

    </form>

    <script>

        function checkUser(){

            var userName=document.forms[0].elements[0].value;

            var xhr='';

            if(window.XMLHttpRequest){

                xhr=new XMLHttpRequest();//DOM

            }else if(window.ActiveXObject){

                xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器标准

            }

            // 打开链接配置参数，

            // *   1、 请求方式  就是要告诉它是get、post

            // *   2、 请求地址 url

            // *   3、同步 还是 异步（async），这个跟页面刷不刷新没有关系，是对程序本身的考虑，默认是异步请求true，true异步请求，这个是ajax里面的两个机制，true是异步表示当有东西回来了才执行，同步请求是false是比如有多个ajax请求，他会等一个结束了才执行第二个，

            xhr.open("get","checkUser.do?userName="+userName,true);

            xhr.send(null);//get方式 send是null
　　　　　　  //请求过后会有一个回调函数等待服务器响应在接受数据

            xhr.onreadystatechange=function(){

                console.log(xhr.responseText)

            }

        }

    </script>

</body>

</html>

连接数据库
 　　示例：

const mysql=require("mysql"); //引用数据库模块

const checkUser=function(req,resp){

    console.log(req)

    let userName=req.query.userName;

    let pool=mysql.createPool({

        host:"主机地址",

        port:"主机端口",

        user:"用户名",

        password:"主机密码",

        database:"数据库名"

    })

    pool.getConnection(function(error,connection){

        if(error){

            console.log(error)

        }

        let sqlStr="select * from t_user where u_name=?";

        connection.query(sqlStr,[userName],function(err,data){

            console.log(data)
　　　　　　　//因为是注册嘛所以是data的长度大于0的时候说明数据库里面已经有这个账号了
　　　　　　　if(data.length>0){

                resp.send("用户名已经存在");

            }else{

                resp.send("你好棒，快去注册吧。");

            }

        });

        connection.release();

    })

}

module.exports={

    checkUser:checkUser
}

服务器引用

const loginCheck=require("数据库模板地址");

服务器拦截请求

app.get("/拦截地址",loginCheck.checkUser)

　

【个人笔记】《知了堂》ajax的get及post请求的更多相关文章

  1. 前端笔记之服务器&Ajax（下）数据请求&解决跨域&三级联动&session&堆栈

    一.请求后端的JSON数据 JSON是前后端通信的交互格式,JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. JSON是互联网各个后台与 ...

  2. [知了堂学习笔记]_JSON数据操作第2讲(JSON的封装与解析)

    上一讲为大家讲了什么是JSON,那么这一讲为大家带来了在WEB项目中JSON的用法,也就是JSON的封装与解析. 此图是数据库中的部分内容 一.JSON封装 所谓的JSON封装,指的是在Servlet ...

  3. [知了堂学习笔记]_ajax的两种使用方式

    一.Ajax概述 1．什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都 ...

  4. [知了堂学习笔记]_JSON数据操作第1讲(初识JSON)

    一.认识JSON 什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式..它基于 ECMAScript (w3c制定的js规 ...

  5. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)

    整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval ...

  6. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)

    整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = ...

  7. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

    整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...

  8. 【知了堂学习笔记】_String、StringBuffer与StringBuilder的区别

    String Stringbuffer  StringBuilder的区别: 1.string是字符串常量,且长度是不可改变的,Stringbuffer.stringBuilder是字符串变量 2.S ...

  9. [知了堂学习笔记]_MVC设计模式与JavaWEB三层架构

    一.MVC设计模式 MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controlle ...

  10. [知了堂学习笔记]_eclipse引入svn插件，并将项目同步到svn

    1. eclipse中不存在SVN问题的解决 1.1发现Team->Share project 下没有svn. 1.2下载安装svn插件. 选择help->Eclipse Marketpl ...

随机推荐

  1. dedecms在php7下的使用方法，织梦dedecsm后台一片空白的解决方法

    前几天,一个老客户,最近升级了服务器,php到php7,把织梦dedecms转移到新服务器后,不能登录后台,让帮忙看一下. 我看了下他们的网站,使用的是织梦V57_UTF8_SP1前台页面是可以访问的 ...

  2. Spring：Bean生命周期

    关于Bean生命周期,我在网上找了两张图: 图1: 图2: 总结起来就是: Bean构建: Bean对象创建 > @Autowired | @Resource> @PostConstruc ...

  3. [LeetCode] 动态规划入门题目

    最近接触了动态规划这个厉害的方法,还在慢慢地试着去了解这种思想,因此就在LeetCode上面找了几道比较简单的题目练了练手. 首先,动态规划是什么呢?很多人认为把它称作一种"算法" ...

  4. iOS 从其他程序切换到自己App，屏幕闪一下问题

    这个问题也是个奇葩的bug,如果你从出现闪的界面去找问题,那就入坑了.这种问题第一反应应该去搜索一下,是否设置了隐藏全局导航条返回按钮右边的title.有时候我们不想让导航控制器push的时候在下个界 ...

  5. “乐”动人心--2017年10款最佳音乐类APP设计盘点

    在上下班的路上,听几首自己喜欢的音乐来打发无聊的等公交车和地铁的时间是现代年轻人的常态.音乐作为最能鼓动人心的"语言",也成为了人们在互联网生活里占比例最高的消费活动之一,一款好看 ...

  6. MST系列

    1.POJ2485 Highways 蛮水的 数组一开始开小了卡了一会儿 我可能是个傻逼 #include<iostream> #include<cstdio> #includ ...

  7. bzoj 3207: 花神的嘲讽计划Ⅰ

    Description 背景 花神是神,一大癖好就是嘲讽大J,举例如下: "哎你傻不傻的![hqz:大笨J]" "这道题又被J屎过了!!" "J这程序 ...

  8. JavaScript函数（二）

    在前面我们已经对函数作了简单的介绍,比如函数的定义.函数的声明.函数的调用和函数的传参等.本节将进一步介绍函数的应用,深度理解函数的各种使用. 函数是一个对象,每个函数时Function类型的一个实例 ...

  9. 脚本全选全不选操作asp.net treeview控件

    //树节点勾选(取消)上级自动全部勾选(取消)下级,勾选下级自动勾选上级,取消全部下级,自动取消上级 //事件响应函数 var HandleCheckbox = function () { //取得事 ...

  10. perl多线程使用

    原文来自:博客园(华夏35度)http://www.cnblogs.com/zhangchaoyang 作者:Orisun <<=========================threa ...