首页 > 代码库 > node的express中间件之static之ajax提交json
node的express中间件之static之ajax提交json
static中间件可以使客户端直接访问网站中的所有静态文件.
利用这个功能可以直接把服务器上的静态页面直接读取出来返回到客户端.
从客户端点击一个按钮,向服务器端发送数据.并且插入到mysql数据库中去.
服务器端代码:
1 var express=require("express"); 2 var app=express(); 3 var mysql=require("mysql"); 4 var pool=mysql.createPool({ 5 host:"localhost", 6 port:3306, 7 database:"test_db", 8 user:"root", 9 password:"gys"10 });11 12 app.use(express.static(__dirname));13 /*app.use(express.static("public"));*/14 app.post("/", function (req,res) {15 req.on("data", function (data) {16 var obj=JSON.parse(data.toString());17 pool.getConnection(function(err,connection){18 if(err) res.send("与mysql数据库建立连接失败.");19 else{20 var str;21 connection.query("insert into users set ?",{username:obj.username,firstname:obj.firstname}, function (err,result) {22 if(err) str="在服务器mysql数据库中插入数据失败.";23 else str="在服务器端mysql数据库汇总插入数据成功.";24 connection.release();25 res.send(str);26 });27 }28 })29 });30 });31 app.listen(1337,"127.0.0.1", function () {32 console.log("开始监听1337");33 });
根目录下的index.html代码:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>session中间件的使用</title> 6 <script type="text/javascript"> 7 function submitData(){ 8 var xhr=new XMLHttpRequest(); 9 xhr.open("post","/",true);10 xhr.onload= function () {11 if(this.status=200){12 document.getElementById("res").innerHTML=this.response;13 }14 };15 var obj={firstname:"郭",username:"延思"};16 xhr.send(JSON.stringify(obj));17 }18 </script>19 </head>20 <body>21 <input type="button" value="提交" onclick="submitData();" />22 <div id="res"></div>23 </body>24 </html>
在浏览器中键入:localhost:1337或localhost:1337/index.html
如果文件名是index.html可以直接这样写:localhost:1337
否则就是localhost:1337/文件名
node的express中间件之static之ajax提交json
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。