static中间件可以使客户端直接访问网站中的所有静态文件.

利用这个功能可以直接把服务器上的静态页面直接读取出来返回到客户端.

从客户端点击一个按钮,向服务器端发送数据.并且插入到mysql数据库中去.

服务器端代码:

 var express=require("express");
var app=express();
var mysql=require("mysql");
var pool=mysql.createPool({
host:"localhost",
port:3306,
database:"test_db",
user:"root",
password:"gys"
}); app.use(express.static(__dirname));
/*app.use(express.static("public"));*/
app.post("/", function (req,res) {
req.on("data", function (data) {
var obj=JSON.parse(data.toString());
pool.getConnection(function(err,connection){
if(err) res.send("与mysql数据库建立连接失败.");
else{
var str;
connection.query("insert into users set ?",{username:obj.username,firstname:obj.firstname}, function (err,result) {
if(err) str="在服务器mysql数据库中插入数据失败.";
else str="在服务器端mysql数据库汇总插入数据成功.";
connection.release();
res.send(str);
});
}
})
});
});
app.listen(1337,"127.0.0.1", function () {
console.log("开始监听1337");
});

根目录下的index.html代码:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>session中间件的使用</title>
<script type="text/javascript">
function submitData(){
var xhr=new XMLHttpRequest();
xhr.open("post","/",true);
xhr.onload= function () {
if(this.status=200){
document.getElementById("res").innerHTML=this.response;
}
};
var obj={firstname:"郭",username:"延思"};
xhr.send(JSON.stringify(obj));
}
</script>
</head>
<body>
<input type="button" value="提交" onclick="submitData();" />
<div id="res"></div>
</body>
</html>

在浏览器中键入:localhost:1337或localhost:1337/index.html

如果文件名是index.html可以直接这样写:localhost:1337

否则就是localhost:1337/文件名

node的express中间件之static之ajax提交json的更多相关文章

  1. node的express中间件之bodyParser

    bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理. 下面是一个文件上传的例子. 建立一个1.html页面 <!DOCTYP ...

  2. MVC中用ajax提交json对象数组

    应用场景:在前端用ajax向服务器提交json对象数组,在controller的以对象数组作为函数的参数,提交的json数组直接转为服务器端的对象数组. 如: 要将json对象数组[{Id:1,Nam ...

  3. Jquery Ajax 提交json数据

    在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...

  4. ajax提交json数据到后端C#解析

    本文链接:https://blog.csdn.net/qq_22103321/article/details/78015920 前端提交json数据 $.ajax({ type: "post ...

  5. Node.js + Express中间件详解

    使用中间件 Express是一种路由和中间件Web框架,它具有自己的最小功能:Express应用程序本质上是一系列中间件函数调用. 中间件函数是可以访问请求对象 (req),响应对象(res)以及应用 ...

  6. node的express中间件之directory

    direcotry中间件用于在浏览器中流出网站某个目录下的所有子目录及文件. app.use(express.directory(path,[options])); 查看网站根目录下的文件及目录 va ...

  7. node的express中间件之session

    虽然session与cookie是分开保存的.但是session中的数据经过加密处理后默认保存在一个cookie中.因此在使用session中间件之前必须使用cookieParser中间件. app. ...

  8. node.js+express+jade系列五:ajax登录

    本文通过jquery实现简单的无刷新登录 1:首先要在router中配置登录请求,因为登录需要传user和pwd考虑到安全需用post请求 {        path:'/',        meth ...

  9. jquery ajax提交json格式的数据,后台接收并显示各个属性

    我的表单如下: <form onsubmit="return false"> <ul> <li><span>用户名</span ...

随机推荐

  1. Linux服务器静态路由配置

    转载自:点击打开链接 静态路由是在路由器中设置的固定的路由表.除非网络管理员干预,否则静态路由不会发生变化.由于静态路由不能对网络的改变作出反映,一般用于网络规模不大.拓扑结构固定的网络中.静态路由的 ...

  2. 实现一个简单的lazyman

    function lazyman(name) { return new lazyman.fn.init(name); } lazyman.fn = lazyman.prototype = { cons ...

  3. ubuntu maven install&config

    可以通过命令直接安装,我还是用文件安装. 1,下载apache-maven-3.5.0-bin.tar.gz二进制压缩文件 https://maven.apache.org/download.cgi ...

  4. Jenkins简单的使用

    1.每个版本开发提单子,写清楚发布那个项目.配置文件.所执行SQL语句等:QA开始部署测试环境 2.如下时发布项目 一.版本发布 登陆系统,选择对应的项目(以api-gateway为例,如果找不到对应 ...

  5. SQL 添加删除列

    --添加一列 alter table TableName add columnName columnType --删除表中的一列 alter table TableName drop column c ...

  6. XMPP协议相关知识

    XMPP协议的组成 主要的XMPP 协议范本及当今应用很广的XMPP 扩展: RFC 3920 XMPP:核心.定义了XMPP 协议框架下应用的网络架构,引入了XML Stream(XML 流)与XM ...

  7. 博客迁移至“零一积流|it-refer.com”

    虽然在博客园写了没几篇文章,考虑到个人发展,自己还是建立一个独立的站点:零一积流. 以后直接在自己网站上写东西了,此处只用做文章收藏.

  8. .NET实现CORS跨域

    1.NuGet:Install-Package Microsoft.AspNet.WebApi.Cors 2.Application_Start中增加(包含在#if DEBUG中):GlobalCon ...

  9. 可能是 BJOI2019 Day1 题解?

    T1 给一个有空白字符的串 $S$,和若干模板串 $X_i$,初始 $Ans = 1$,每当一个模板串在 $S$ 中作为子串出现时,$Ans$ 会乘以 $X_i$ 的权值 $Val_i$,然后如果 $ ...

  10. XMLHttpRequest cannot load file浏览器无法异步加载本地file文件

    原因:Chrome不支持本地Ajax请求,在.html文件中访问.json文件时就会出现这个问题,就是说这个时候不能加载这个.html文件. 解决方式 打开Chrome快捷方式的属性中设置: 右击Ch ...