1)接收前台form表单的get传值
注意前台配置form表单的action是后台配置的路由路径
//index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="/upload" method="get"> <!--这里的接口就是node后端分配的路由-->
用户名：<input type="text" name="user">
<p></p>
密码：<input type="text" name="pass">
<p></p>
<button>提交</button>
</form>
</body>
</html>
//main.js
var express = require('express');
var app = express();
app.get('/',function(req,res){
res.sendFile(__dirname+'/index.html') //直接读取本地路径的文件
})
/*或者改文件在public文件夹中也就是静态资源文件的目录*/
app.use(express.static('./public')) //上面的路由就不用分配
app.get('/getData',function(req,res){
var result = req.query; //这个是前台穿过来的表单数据
// Do something
res.send(obj) //返回数据
})
app.listen(5000)
2)进阶利用ajax进行get传值
后台的main.js与上述一样
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>ajax提交数据</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$('button').click(function () {
$.ajax({
type:'get',
url:'/upload' //一样接口路径
data:{user:'tes','pass':'123456798'},
success:function (data) {
console.log(data) //这个data就是后台返回的res.write（）或者是res.send()
},
error:function (err) {
console.log('请求出错！')
}
})
})
</script>
</body>
</html>
image.png
接收的数据
image.png
返回的数据
3)接收前台post传值
后台用到了body-parser模块用来解析post的传过来的值
//index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="/postData" method="post">
用户名：<input type="text" name="user">
<p></p>
密码：<input type="text" name="pass">
<p></p>
<button>提交</button>
</form>
</body>
</html>
//main.js
var express = require('express');
var app = express();
var bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extende:true}));
app.use(bodyparser.json())
/*直接设置静态资源文件*/'
app.use(express.static('./public'))
app.post('/postData',function (req,res) { //这里参数加上刚刚的解析的而且这里不是get了
var result = req.body
res.send(JSON.stringify(result));
})
app.listen(5000)
image.png
4)进阶利用ajax进行post传值
后台一样与post处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>ajax请求数据</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$('button').click(function () {
$.ajax({
type:'post',
url:'http://localhost:5000/postData',
data:{user:'test',pass:'123456789'},
success:function(data){
console.log(data)
},
error:function (err) {
console.log(err);
}
})
})
</script>
</body>
</html>
image.png
image.png
