目录
一、jQuery对ajax的封装
二、Node的数据库编程
一、jQuery对ajax的封装
1、$.ajax({})：可以实现get、post等请求
$.ajax({
url: '请求地址',
type: '请求类型',
data: '请求参数',
dataType: '服务器端响应数据的类型',
success: function(data){ -->请求成功后的回调函数
参数'data'存放的服务器端的响应数据
}
error: function(err){ -->请求失败后的回调函数
参数'err'存放的是请求失败的信息
}
})
新建一个js文件夹，将jQuery库文件复制进去：
在html文件夹新建一个.html文件：
导入jQuery库：
<script src="../js/jquery-3.4.1.js"></script>前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery对ajax的封装</title>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<div>
<label>用户名：
<input type="text" id="username">
<span id="name_info"></span>
</label>
<br><br>
<label>密 码：
<input type="password" id="userpwd">
<span id="pwd_info"></span>
</label>
<br><br>
<button id="btn_login">登录</button>
<br><br>
<h2 id="info"></h2>
</div>
<script>
$(function(){ //jQuery的入口函数
$('#btn_login').click(function(){
//获取用户输入的信息
let name = $('#username').val();
let pwd = $('#userpwd').val();
//向服务器端发送请求
$.ajax({
// url:'http://localhost:3000/login/check',//get请求
url:'http://localhost:3000/login/post',
type:'get',
data: {
username: name,
userpwd: pwd
},
dataType:'json',
success:function(result){ //result里是服务器端返回的数据
if(result.code===101){
$('#name_info').html(result.msg)
}else if(result.code===102){
$('#pwd_info').html(result.msg)
}else{
$('info').html(result.msg)
}
}
})
})
})
</script>
</body>
</html>后台服务器：
const express = require('express');
const router = express.Router();
/*
http://localhost:3000/login/check
*/
router.get('/check',(req, res) => {
//获取客户端的get请求参数：req.query
console.log(req.query.username)
let uname = req.query.username
let upwd = req.query.userpwd
//对用户信息进行判断
if (uname !== 'abc'){
res.send({
code: 101,
msg: '用户名错误'
})
}else if (upwd !== '123456'){
res.send({
code: 102,
msg: '密码错误'
})
}else{
res.send({
code: 1000,
msg: '合法用户'
})
}
})
/*
http://localhost:3000/login/post
*/
router.post('/post',(req, res) => {
console.log(req.body.username)
res.send({
code: 1000,
msg: '合法用户'
})
})
module.exports = router; 
2、$.get(url,[data],[callback],[type])：实现get请求
3、$.post(url,[data],[callback],[type])：实现post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery对ajax的封装</title>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<div>
<label>用户名：
<input type="text" id="username">
<span id="name_info"></span>
</label>
<br><br>
<label>密 码：
<input type="password" id="userpwd">
<span id="pwd_info"></span>
</label>
<br><br>
<button id="btn_get">get方式登录</button>
<button id="btn_post">post方式登录</button>
<br><br>
<h2 id="info"></h2>
</div>
<script>
$(function(){ //jQuery的入口函数
$('#btn_get').click(function(){
//获取用户输入的信息
let name = $('#username').val();
let pwd = $('#userpwd').val();
//向服务器端发送请求
$.get('http://localhost:3000/login/check',{username:name,userpwd:pwd},function(result){
if(result.code===101){
$('#name_info').html(result.msg)
}else if(result.code === 102){
$('#pwd_info').html(result.msg)
}else{
$('#info').html(result.msg)
}
},'json')//服务器端返回数据的格式
})
$('#btn_post').click(function(){
let name = $('#username').val();
let pwd = $('#userpwd').val();
$.post('http://localhost:3000/login/post',{username:name,userpwd:pwd},function(result){
if(result.code===101){
$('#name_info').html(result.msg)
}else if(result.code === 102){
$('#pwd_info').html(result.msg)
}else{
$('#info').html(result.msg)
}
},'json')
})
$('#btn_post').click(function(){
let name = $('#username').val();
let pwd = $('#userpwd').val();
$.post('http://localhost:3000/login/post',{username:name,userpwd:pwd},function(result){
if(result.code===101){
$('#name_info').html(result.msg)
}else if(result.code === 102){
$('#pwd_info').html(result.msg)
}else{
$('#info').html(result.msg)
}
},'json')
})
})
</script>
</body>
</html>
表单序列化实例：
前端：
新建一个.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单序列化</title>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body style="text-align: center;">
<div>
<form id="testForm">
<label>姓名:
<input type="text" name="username">
</label>
<br><br>
<label>性别:
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女
</label>
<br><br>
<label>年龄：
<input type="number" name="age">
</label>
<br><br>
<label>地址：
<input type="text" name="address">
</label>
<br><br>
<button type="button" id="btn">提交</button>
</form>
</div>
<script>
$(function(){
$('#btn').click(function(){//给按钮绑定事件
$.ajax({
url: 'http://localhost:3000/login/post',
type: 'post',
data: $('#testForm').serialize(), //表单序列化
dataType: 'json',
success: function(result){
console.log(result)
}
})
})
})
</script>
</body>
</html>服务器：
/*
http://localhost:3000/login/post
*/
router.post('/post',(req, res) => {
console.log(req.body)
res.send({
code: 1000,
msg: '合法用户'
})
})提交成功后，后台的响应：
服务器端：
二、Node的数据库编程
Node连接数据库实现对数据库的CRUD(增、删、改、查)操作。
1、操作关系型数据库(MySQL)
（1）安装Mysql模块：npm install mysql
（2）创建配置文件,用来连接数据库
在项目中新建一个文件夹config，然后再改文件夹下新建dbconfig.js文件：
//mysql配置文件
var mysql = {
host: '127.0.0.1', //数据库服务器的地址
port: 3306, //数据库使用的端口号
database: 'dbms', //数据库名
user: 'root', //mysql数据库的用户名
password: '123456' //登录数据库的密码
}
module.exports = mysql;我要操作的数据库表：
（3）创建操作数据库的接口文件
再routes文件夹下新建option.js文件
const express = require('express');
const router = express.Router();
const mysql = require('mysql');
const db = require('../config/dbconfig')
/*
http://localhost:3000/dbms/employee
*/
router.get('/employee',(req, res) => {
//1.创建数据库连接对象
let conn = mysql.createConnection(db);
//2.通过数据库连接对象实现CRUD操作
//2.1 查询employee表中的所有数据
conn.query('select * from employee',function (err,results){
if (err){
throw err
}
res.send(results)
})
//2.2 关闭数据库连接
conn.end((err)=>{
console.log(err)
})
})
module.exports = router;在app.js里面做配置：
启动服务器!
用Postman测试数据库连接：
