16.Ajax与SQL

一、代码和包的准备
1.在VScode中新建16文件夹，16文件下新建static文件夹和server.js文件，static文件夹下新建index.html文件和ajax.js文件
在这里插入图片描述
2.在16文件夹下安装mysql包，16文件夹右键在终端中打开，输入npm init（初始化项目），出现提示按回车，其中在description和repository项时输入ajax

{
  "name": "16",
  "version": "1.0.0",
  "description": "ajax",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "repository": {
    "type": "git",
    "url": "ajax"
  },
  "author": "",
  "license": "ISC"
}

项目初始化完成后在16文件夹中自动创建node_modules文件夹、package-lock.json、package.json文件
在这里插入图片描述
3.给ajax.js、index.html、server.js三个文件添加代码
ajax.js代码

function ajax(options) {
    var xhr = new XMLHttpRequest()
    var str = ""
    for (var key in options.data) {
        str += "&" + key + "=" + options.data[key]
    }
    str = str.slice(1)
    if (options.type == "get") {
        var url = options.url + "?" + str
        xhr.open("get", url)
        xhr.send()
    } else if (options.type == "post") {
        xhr.open("post", options.url)
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
        xhr.send(str)
    }else if(options.type=='put'){
        xhr.open('PUT', options.url)
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
        xhr.send(str)
    }else if(options.type=='delete'){
        xhr.open('delete', options.url)
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
        xhr.send(str)
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var d = xhr.responseText
            options.success && options.success(d)
        } else if (xhr.status != 200) {
            options.error && options.error(xhr.status)
        }
    }
}

index.html的标签

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>index</title>
    <script src="ajax.js"></script>
    <style>
    </style>
</head>
<body>
    <label>用户</label>
    <input type="text" id="user"><br>
    <label>密码</label>
    <input type="text" id="pass"><br>
    <input type="button" value="添加" id='add'>
    <table border="1" id='table'>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>密码</th>
            <th></th>
            <th></th>
        </tr>
        <tr id="template">
            <td>{{id}}</td>
            <td>{{username}}</td>
            <td>{{password}}</td>
            <td><button name={{id}}>修改</button></td>
            <td><button name={{id}}>删除</button></td>
        </tr>
    </table>
    <script>
        var table = document.querySelector('#table')
        var add = document.querySelector('#add')
        var user = document.querySelector('#user')
        var pass = document.querySelector('#pass')
        //模板处理函数
        function template(id, data) {
            var template = document.querySelector(id),
                trHTML = ''
            for (i = 0; i < data.length; i++) {
                trHTML += template.outerHTML
                    .replace(/\{\{id\}\}/g, data[i].id)
                    .replace(/\{\{username\}\}/g, data[i].username)
                    .replace(/\{\{password\}\}/g, data[i].password)
            }
            template.outerHTML = trHTML
        }
   	
    </script>
</body>
</html>

server.js基本代码（简化了对urls.pathname的处理）

var http = require('http')
var fs = require('fs')
var url = require('url')
var querystring = require('querystring')
var mysql = require('mysql')
var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'test'
})
connection.connect()

http.createServer(function (req, res) {
    var urls = url.parse(req.url, true)
    if (urls.pathname == '/') {
        fs.readFile('./static/index.html', function (err, data) {
            res.writeHead(200, { 'Content-Type': 'text/html' })
            res.write(data)
            res.end()
        })
    } else if (urls.pathname == '/ajax.js') {
        fs.readFile('./static/ajax.js', function (err, data) {
            res.writeHead(200, { 'Content-Type': 'application/x-javascript' })
            res.write(data)
            res.end()
        })
    } else if (urls.pathname == '/users') {
    	var sql = ''
        switch (req.method) {
            case 'GET':

                break;
            case 'POST':

                break;
            case 'PUT':

                break;
            case 'DELETE':

                break;
        }
    } else {
        res.end()
    }
}).listen(8080)
console.log('http://127.0.0.1:8080')
//自定义mysql数据库操作函数
function mysql_query(sql, res) {
    connection.query(sql, function (err, results) {
        res.writeHead(200, { 'Content-Type': 'application/json;charset=UTF8' })
        if (err) {
            res.write('SQL错误')
        } else {
            res.write(JSON.stringify(results))
        }
        res.end()
    })
}

二、前端Ajax与后端SQL操作
1.get与select
在index.html中template函数代码块的后面执行Ajax方法，其中给type属性为get

        ajax({
            type: 'get',
            url: 'http://127.0.0.1:8080/users',
            data: {},
            success: function (results) {
                console.log(results)//控制台输出获取得到的数据
            },
            error: function (err) {
                console.log(err)
            }
        })

后端server.js的switch的case ‘GET’:中添加select查询数据语句，再执行mysql_query函数

sql = 'select * from users'
mysql_query(sql, res)

2.post与insert
在index.html中script标签中继续添加add添加按钮的鼠标点击的方法，当user用户和pass密码输入框不为空时，ajax通过post类型发送user用户和pass密码的value值。

add.onclick = function () {
    if (pass.value != '' && user.value != '') {
        ajax({
            type: 'post',
            url: 'http://127.0.0.1:8080/users',
            data: {
                username: user.value,
                password: pass.value
            },
            success: function (result) {
                location.reload()
            },
            error: function (err) {
                console.log(err)
            }
        })
    } else {
        alert('用户名和密码不能为空')
    }
}

后端server.js的switch的case ‘POST’:中添加insert添加数据语句，再执行mysql_query函数

var body = ''
//接收post数据
req.on('data', function (data) {
    body += data
});
//当接收完成时执行回调函数
req.on('end', function () {
    body = querystring.parse(body)
    var field = '', values = ''
    //对接受数据的key和value进行处理
    for (var item in body) {
        field = field + item + ','
        values = values + '"' + body[item] + '",'
    }
    field = field.substring(0, field.lastIndexOf(','))
    values = values.substring(0, values.lastIndexOf(','))
    
    sql = 'insert into users (' + field + ') values(' + values + ')'
    mysql_query(sql, res)
})

3.put与update
在index.html中script标签中继续添加table的鼠标点击的方法，因为修改和删除按钮是循环创建，通过判断table中被点击元素的innerHTML属性区分是删除、修改、确定（确定修改）按钮。点击修改，表格的中对应修改行的user和pass变成输入框；点击确定，通过ajax的put类型提交user、pass输入框和id值的数据。

table.onclick = function (e) {
   if (e.target.innerHTML == '删除') {

    } else if (e.target.innerHTML == '修改') {
        var tr = e.target.parentNode.parentNode
        tr.children[1].innerHTML = '<input type="text" value="' + tr.children[1].innerHTML + '">'
        tr.children[2].innerHTML = '<input type="text" value="' + tr.children[2].innerHTML + '">'
        e.target.innerHTML = '确定'
    } else if (e.target.innerHTML == '确定') {
        var tr = e.target.parentNode.parentNode
        e.target.innerHTML = '修改'
        ajax({
            type: 'put',
            url: 'http://127.0.0.1:8080/users',
            data: {
                id: e.target.name,
                username: tr.children[1].children[0].value,
                password: tr.children[2].children[0].value
            },
            success: function (result) {
                location.reload()
            },
            error: function (err) {
                console.log(err)
            }
        })
    }
}

后端server.js的switch的case ‘PUT’:中添加update更新数据语句，再执行mysql_query函数

var body = ''
req.on('data', function (data) {
    body += data
});
req.on('end', function () {
    body = querystring.parse(body)
    sql = 'update users set username="' + body.username + '",password="' + body.password + '" where id = ' + body.id
    mysql_query(sql, res)
})

4.delete与delete
在table.onclick的e.target.innerHTML == '删除’条件下执行ajax的type为delete的方法，传递id参数。

ajax({
    type: 'delete',
    url: 'http://127.0.0.1:8080/users',
    data: {
        id: e.target.name
    },
    success: function (result) {
        location.reload()
    },
    error: function (err) {
        console.log(err)
    }
})

后端server.js的switch的case ‘DELETE’:中添加delete删除数据语句，再执行mysql_query函数。

var body = ''
req.on('data', function (data) {
    body += data
});
req.on('end', function () {
    body = querystring.parse(body)
    sql = 'delete from users where id=' + body.id
    mysql_query(sql, res)
})

最终效果
在这里插入图片描述

yaochaohx

发布了30 篇原创文章 · 获赞 2 · 访问量 6395

私信关注

猜你喜欢