【个人笔记】《知了堂》ajax的get及post请求
ajax
执行步骤
// 步骤
设置事件 调用函数
- 创建一个XHR对象
- 打开ajax通道,链接服务器,配置请求信息和参数
- 发送数据
- 设置回调函数
- 服务器接受请求,处理请求,查询数据库,响应 及 返回数据
- 回调函数接受数据,执行回调函数
- 回调函数中 更新页面。
示例:
<!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请求的更多相关文章
- 前端笔记之服务器&Ajax(下)数据请求&解决跨域&三级联动&session&堆栈
一.请求后端的JSON数据 JSON是前后端通信的交互格式,JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. JSON是互联网各个后台与 ...
- [知了堂学习笔记]_JSON数据操作第2讲(JSON的封装与解析)
上一讲为大家讲了什么是JSON,那么这一讲为大家带来了在WEB项目中JSON的用法,也就是JSON的封装与解析. 此图是数据库中的部分内容 一.JSON封装 所谓的JSON封装,指的是在Servlet ...
- [知了堂学习笔记]_ajax的两种使用方式
一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都 ...
- [知了堂学习笔记]_JSON数据操作第1讲(初识JSON)
一.认识JSON 什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式..它基于 ECMAScript (w3c制定的js规 ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)
整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)
整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)
整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...
- 【知了堂学习笔记】_String、StringBuffer与StringBuilder的区别
String Stringbuffer StringBuilder的区别: 1.string是字符串常量,且长度是不可改变的,Stringbuffer.stringBuilder是字符串变量 2.S ...
- [知了堂学习笔记]_MVC设计模式与JavaWEB三层架构
一.MVC设计模式 MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controlle ...
- [知了堂学习笔记]_eclipse引入svn插件,并将项目同步到svn
1. eclipse中不存在SVN问题的解决 1.1发现Team->Share project 下没有svn. 1.2下载安装svn插件. 选择help->Eclipse Marketpl ...
随机推荐
- git 设置和取消代理
# 设置ss git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'soc ...
- Platt SMO 和遗传算法优化 SVM
机器学习算法实践:Platt SMO 和遗传算法优化 SVM 之前实现了简单的SMO算法来优化SVM的对偶问题,其中在选取α的时候使用的是两重循环通过完全随机的方式选取,具体的实现参考<机器学习 ...
- Java 伙伴系统(模拟)
参考:https://labrick.cc/2015/10/12/buddy-system-algorithm/ 代码过烂 不宜参考. output: [operating.entity.Heap@4 ...
- bzoj 1855: [Scoi2010]股票交易
Description 最近lxhgww又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,lxhgww预测到了未来T天内某只股票的走势,第i天的股票买入价 ...
- [C#]获得WindowsForm上所有特定类型的控件
本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 语言:C# DotNet版本:.Net FrameWork 4.0及以 ...
- MySQL在字段中使用select子查询
前几天看别人的代码中看到在字段中使用select子查询的方法,第一次见这种写法,然后研究了一下,记录下来 大概的形式是这样的: select a .*,(select b.another_field ...
- 安装supervisord
一:简介 supervisord是一个进程管理工具,提供web页面管理,能对进程进行自动重启等操作. 优点: - 可以将非后台运行程序后台运行 - 自动监控,重启进程 缺点: - 不能管理后台运行程序 ...
- NumPy学习笔记 三 股票价格
NumPy学习笔记 三 股票价格 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.&l ...
- Elasticsearch5.4常见问题总结
最近项目中用到了Elasticsearch5.4(ES)是比较新的一个版本,使用的过程中出现了很多的问题,很是头疼,但是问题最终还是解决掉了. 问题一:ESClient获取慢,并且不能获取Client ...
- Java的虚方法
虚方法出现在Java的多态特性中, 父类与子类之间的多态性,对父类的函数进行重新定义.如果在子类中定义某方法与其父类有相同的名称和参数,我们说该方法被重写 (Overriding).在Java中,子类 ...