简单的ajax后台调用总结(原生JS)

292 阅读3分钟

首先来理解一下html - js -ajax-node.js-数据库之间的关系


在我眼里,ajax请求类似于一把钥匙,可以打开node.js,也可以说是把本地的请求发送给服务端的媒介。

node.js说白了就是运行在服务端的js,本地运行时必须打开黑窗口。

好啦~ 我把AJAS请求写在我的公共js上,并且进行封装,这样我在哪里只要是需要就可以通过传参来调用ajas

//AJSO ByGo="GET/POST" UrlGo="url" 调用方法的方法名 ; 调用区域调用AJAXbox;function AJSOgo(ByGo, UrlGo,fn) {    var xmlhttp;    //判断浏览器,并创建对象    if (window.XMLHttpRequest) {        xmlhttp = new XMLHttpRequest();//IE7+ 创建对象    } else {        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//IE5/6    }    //发送请求    console.log(ByGo,UrlGo)    xmlhttp.open(ByGo, UrlGo, true);    xmlhttp.send();    //响应事件    xmlhttp.onreadystatechange = function () {        //响应状态(服务器响应已做好被处理的准备时所执行的任务)        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {            //获取服务器数据            var AJAXbox = xmlhttp.responseText;            // return AJAXbox;不行            fn(AJAXbox);        }    }} 

这样,我在需要调用数据库内容时,只需要输入

//     调用的方式(因为我没有判定,get/post,所以建议调用‘get’),路由端口,方法名
AJSOgo('GET', 'http://127.0.0.1:8087/', checkTrue);

========================================================

数据库node.js

首先需要在黑盒子里面安装mysql 和 express

> cnpm i mysql -S
> cnpm i express -S

当然,保险起见,一定要在后台看一看


ok

写node.js

获取数据库 getmySQL.js

var mysql = require('mysql'); //导入mysql模块function getcon() {    //创建数据库相关信息 mysql提供createConnection的链接方法var connection = mysql.createConnection({host: '127.0.0.1', //数据库地址user: 'root', //数据库用户名password: 'root', //数据库密码database: 'hoppotsql' //数据库名});return connection;//返回结果}//导出module.exports=getcon;

再写一个getExpress.js

这些都是共用的头部

//导入数据库var getmySQL = require("./getmySQL");//导入express模块var getExpress = require("express");//获取express方法var app = getExpress();//设置跨域访问(设置在所有的请求前面即可)app.all("*", function (req, res, next) {    //设置允许跨域的域名,*代表允许任意域名跨域    res.header("Access-Control-Allow-Origin", "*");    //允许的header类型    res.header("Access-Control-Allow-Headers", "content-type");    //跨域允许的请求方式     res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");    if (req.method == 'OPTIONS')        res.send(200); //让options尝试请求快速结束    else        next();});//插入post的body!!var bodyParser = require('body-parser');app.use(bodyParser.urlencoded({ extended: false }));app.use(bodyParser.json());

开始写端口啦~~

app.get('/端口名', function (req, res) {    //获取数据库链接对象!!!!!!!!!!!!!!!一定要写在这里!!!!!!    var getmySQLCon = getmySQL();    //启动数据库    getmySQLCon.connect();    var sql = `SELECT * FROM proclass`;    getmySQLCon.query(sql, function (err, result) {        if (err) {            console.log("出错了:" + err.message);            res.send({                state: false,                des: "出错了:" + err.message            });            getmySQLCon.end();            return;        } else {            if (result.length == 0) {                res.send({                    state: true,                    des: "没有信息哦"                })            } else {                res.send({                    state: true,                    des: result                })            }        }        getmySQLCon.end();//关闭数据库    })})

var server = app.listen(8087, function () {    console.log("应用实例,访问地址 http://127.0.0.1:8087");})

ok~

那么,如果是传参进来呢?

首先是在js部分

 AJSOgo('GET', 'http://127.0.0.1:8087/getUserSql?Phone='+123, signupJudge);

node.js

app.get('/getUserSql', function (req, res) {    //获取唯一的电话号码!    var Phone = req.query.Phone;    //获取数据库链接对象!!!!!!!!!!!!!!!一定要写在这里!!!!!!    var getmySQLCon = getmySQL();    //启动数据库    getmySQLCon.connect();    var sql = `SELECT * FROM users WHERE Phone = "${Phone}"`;    getmySQLCon.query(sql, function (err, result) {        if (err) {            console.log("出错了:" + err.message);            res.send({                state: false,                des: "出错了:" + err.message            });            getmySQLCon.end();            return;        } else {            if (result.length == 0) {                res.send({                    state: false,                    des: "没有信息哦"                })            } else {                res.send({                    state: true,                    des: result                })            }        }        getmySQLCon.end();    })})

ok!

好啦~

对了,在实际中获取到一个对象该如何是好呢?

这是一段页面的js

    var E_mail=myClass("E-mail")[0].value;//myClass是自己封装的    var Phone=myClass("Phone")[0].value;    var UserName=myId("UserName").value;    var PassWord=myId("PassWord").value;     userBox={E_mail:E_mail,Phone:Phone,UserName:UserName,PassWord:PassWord};
  userBox=JSON.stringify(userBox); //转化为字符串类型哦~!!!!!!!!!!!!!!!    AJSOgo('GET', 'http://127.0.0.1:8087/giveUserSql?userBox='+userBox,getUserBox);

好的!

node.js获取到数据,也要转化为json对象哦

//用户注册写入数据库app.get('/giveUserSql', function (req, res) {    //获取name的值,记得看哈body有没有引入进来    var userBox = req.query.userBox;    var getmySQLCon = getmySQL();    userBox=JSON.parse(userBox);    console.log(userBox);    //启动数据库    getmySQLCon.connect();    var sql = `INSERT INTO users (Phone,UserName,PassWord) VALUES ("${userBox.Phone}","${userBox.UserName}","${userBox.PassWord}")`;    console.log(sql);    getmySQLCon.query(sql, function (err, result) {        if (err) {            console.log("出错了:" + err.message);            res.send({                state: false,                des: "出错了:" + err.message            });            return;        } else {            if (result.affectedRows > 0) {                res.send({                    state: true,                    des: result                })            } else {                res.send("注册失败")            }        }        getmySQLCon.end();    })})

搞定!

不管什么数据,得到结果的function里面都要进行转化

function getUserBox(th){            th=JSON.parse(th);//转化一下,我这里没有必要使用啦~但是如果需要调用返回的值,可以用哦~            if(th.stat){//突然发现这个也超级有作用 哈哈哈                alert("注册成功!!+th.des[0].username");                return true;            }else{                alert("没有注册成功,请重新注册!!");            }                   }

ok 以上总结