zoukankan      html  css  js  c++  java
  • 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/文件名

  • 相关阅读:
    JSTL 标签库
    C++(一)— stringstream的用法
    深度学习—反向传播的理解
    深度学习—线性分类器理解
    Python—numpy.bincount()
    Python—numpy.argsort()
    Python—numpy.flatnonzero()
    C++(零)— 提高程序运行效率
    机器学习(八)—GBDT 与 XGBOOST
    机器学习(七)—Adaboost 和 梯度提升树GBDT
  • 原文地址:https://www.cnblogs.com/guoyansi19900907/p/4149116.html
Copyright © 2011-2022 走看看