如上，利用nodejs,ajax,mqysql做一个响应，从mysql数据库中选出products表，通过 nodejs读取出来，前端用ajax的XMLHttpRequest将表放入html的表中。（products表，是从《mysql必知必会》一书的表中内容 ）
第一步：写一个mysql.js
在这里插入代码片 let mysql=require('mysql'); //需要npm install mysql 第三方库 let http=require('http'); let fs=require('fs'); let server=http.createServer(); let connection=mysql.createConnection({ host:'localhost', user:'root', password:'Aa430521/', database:'crashcourse' //products表在该database中 }); connection.connect(function(err) { //测试是否连接数据库成功 if (err) { console.log(err); return; } console.log('mysql connect success') }) server.on('request',(req,res)=>{ //server on 和下边的 server listen为 let http=require('http');中http库的写法 console.log(req.method,req.url); if (req.url==='/') { res.setHeader('Content-type','text/html;charset=utf-8'); fs.readFile('./mysql.html','utf8',(err,fileData)=>{ res.end(fileData); }) } else if (req.url==='/xhrSql') { //req.url==='/xhrSql' 是前端ajax发来的请求后的响应 let count=0; connection.query('select * from products',(err,sqlData)=>{ //'select * from products'是sql语句 if (err) return; console.log('query的结果查询成功'); res.end(JSON.stringify(sqlData)); //到这一步，直接怼页面上去了，不是会到xhr.onreadystatechange上去么? 到这时犯了个错误，前端直接在网址上输//127.0.0.1:8000/xhrSql了，内容就到页面上去了，实际上不需要输这个网址，在127.0.0.1:8000/下，是ajax推送/xhrSqr到后端，后端响应，再推送至前端。 //下边的注释掉的代码 数据库什么时候关闭，connect.end(),还没有弄懂。 count=1; // if (count===1) { // connection.end((err)=>{ // console.log('database closed'); // }); // } }) } else { fs.readFile('.' + req.url,(err,fileData)=>{ res.end(fileData); }) } }) server.listen(8000,()=>{ console.log('访问127.0.0.1:8000成功'); })//=============================================================
第二步：写一个mysql的html`
在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mysql学习</title> </head> <body> <h2>能正常展示页面了 page could display 汉字正常显示了么?</h2> <table border="1"> <thead class="th0"> <th></th> </thead> <tbody class="tr0"> <tr></tr> </tbody> </table> </body> <script> let xhr=new XMLHttpRequest(); let th0A=document.querySelector('.th0') let tr0A=document.querySelector('.tr0'); let arr1='',arr2=''; xhr.onreadystatechange=function () { if (xhr.readyState===4) { console.log(JSON.parse(xhr.responseText)); let xhrData=JSON.parse(xhr.responseText); //推送过来的表内容，是[{},{},{},{},{}...,{}] 数组中有对象的形式，在这一步卡了很久，怎么处理这种数据放到html中? // for (let i=0;i<xhrData.length;i++) { // console.log(xhrData[i]); let count=0; for (let j of xhrData) { //for (j of xhrData数组) ； for(k in j) 这两个 for组合，分离key和value console.log('j等于',j,`第${count}次循环`); count++; for (let k in j) { console.log('键：' + k); console.log('值：' + j[k]); arr1+='<th>' + k +'</th>' arr2+='<td>' + j[k] +'</td>'; } console.log('arr1等于',arr1); console.log('arr2等于',arr2); arr2='<tr>' + arr2 + '</tr>'; console.log('arr2等于',arr2); if (count === 1) th0A.innerHTML=arr1; //arr1是表头，只要一次就可以了 tr0A.innerHTML+=arr2; arr2=''; //循环一次后，arr2要清空一次，不然就重复内容了。 // break; // } } } } xhr.open('get','xhrSql') xhr.send(); // xhr.οnlοad=function () { //xhr.οnlοad=function(){},和上边的 xhr.onreadystatechange=function (){}是否能达到同样的效果???? // console.log(xhr.responseText); // } </script> </html>第三步，在node中，node mysql.js 即可以看到效果了。
