【个人笔记】《知了堂》ajax的get及post请求

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)

 

时间: 2024-10-25 05:18:07

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

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

上一讲为大家讲了什么是JSON,那么这一讲为大家带来了在WEB项目中JSON的用法,也就是JSON的封装与解析. 此图是数据库中的部分内容 一.JSON封装 所谓的JSON封装,指的是在Servlet中将从数据库得到的数据转化成JSON格式的字符串. 那么什么是JSON格式的字符串? JSON格式的字符串就是指字符串的内容要完全符合JSON数据的格式 这个就是在servlet中输出的已经封装好的JSON格式字符串,在控制台输出的效果. 如何封装 在我自己的WEB中,原本想用原生态的JSON去封装

[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第1讲(素材查找和界面框架搭建)

一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面的宽度和高度要一致): HTML代码: <!--main div是游戏界面的大DIV --> <div id="main" style="height: 643px;"> <!--玩家头像DIV--> <div id="

[知了堂学习笔记]_初始化顺序

在我们每次new一个对象的时候,对象都会被初始化,但是他们初始化的顺序又是怎样呢?现在我以存在继承与不存在继承的代码给大家演示. 一.对于没有继承的初始化的顺序(静态变量,静态块.构造函数.变量) package test; //没有继承情况下的代码 public class test5 { //静态变量 private static String st="静态变量"; //静态块 static{ System.out.println(st); System.out.println(&

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

一.认识JSON 什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式..它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率. JSON语法 {}表示JSON对象 在{}中是1~n个键值对 键与值之间用:隔开,键值对用,隔开.如

【知了堂学习笔记】Eclipse,Myeclipse连接MySQL数据库和Oracle数据库

一.连接MySQL数据库 1.由于Eclipse,Myeclipse都没有连接MySQL数据的架包,我们需要自行下载MySQL连接架包 mysql-connector(官方链接:http://dev.mysql.com/downloads/connector/j/5.0.html),下载版本最好是最新版. 2.下载好后,复制到你的项目里任何位置,然后右键架包选择 Build path -> add to Build path,然后点击项目的Libraries里的Referenced Librar

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

整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval(fun,ms) 在调用setInterval()会返回一个类似id的字段,该字段在clearInterval(id)可以指定相应的计时器并清除 一.开始游戏 /** * 面板441*632 * 飞机 66*80 */ /** * 开始游戏 */ function startGame() { var

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

整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能进行基本操作了. 敌机对象的实现,并且初步完成了boos出现(30s自动出现).然后又引出了许多方法的处理,如英雄子弹击中敌机和boos,英雄与敌机相撞等等.并一一解决. 随后又设置了一些游戏的参数,如血量,关卡数,等级,积分,必杀,道具对象等等. 最后又完成了一些辅助功能,暂停游戏,继续游戏,退出

[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲(四大界面之间的跳转与玩家飞机的移动)

一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3.点击暂停,弹出具有透明度的暂停界面 4.点击暂停界面的开始按钮,隐藏暂停界面,调用开始方法(点击登录跳转的方法): 5.点击暂停界面的退出游戏,只显示登录界面,隐藏其他界面: 6.游戏结束界面,该界面的跳转目前还不能通过游戏实现,可以先建设(根据上一讲的游戏界面图片制作). 7.点击游戏结束界面的开

[知了堂学习笔记]_牵线Eclipse和Tomcat第二篇 —— 安装Tomcat&amp;&amp;添加Tomcat到Eclipse

来了来了~~~~~我们的"织女"--Tomcat来了,牛郎们等急了吧!哈哈! 一.安装Tomcat 下载地址:http://tomcat.apache.org/download-70.cgi 左侧:选择的是Tomcat的版本,这里以Tomcat 7为例. 右边可以选择不同的安装版本,红框部分是windows的zip安装版本, 选择和自己jdk位数一样的位数,进行下载就行了. 安装Tomcat 那就很简单了解压就行了,解压后如下图: 解压后选择 bin目录下面的->startup.

[知了堂学习笔记]_Jquery_Validate 表单校验的使用

一.效果图: 二.JqueryValidate的好处 在做注册.或者类似以上的表单提交的时候,大家是不是都很烦那种,把数据拿到后台去判断, 可能经过了正则表达式之类的复杂判断,然后发现数据错误.接着通过request转发到页面上,再通过EL 表达式输出错误信息.实话实话,在没发现这个插件之前,我是这么干的,好痛苦的感觉. JqueryValidate的好处就在于,你不必经过servlet,就可以在页面上面判断用户输入的信息是否正确,它能够快速实现 表单的校验. 三.引入插件 顺序不能乱,此插件是