1.1-浏览器向服务器发送get请求参数的两种方式
- *浏览器向服务端发送get请求主要有两种方式,一种是使用href跳转,url拼接参数
- 一种是ajax请求发送参数 这两种在服务端都是一样处理,没有任何区别
<button type="submit" class="btn btn-success" onclick="window.location.href='/get?name=张三&age=18'">点击发送一个带参数的get请求</button>
<a href="/get?name=张三&age=18">不管是a标签还是按钮,只要是href路径都可以</a>
<script>
$('#form').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: 'heroAdd',
type: 'get',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
}
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hero - Admin</title>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
<style>
.hero-list img {
width: 50px;
}
</style>
</head>
<body>
<header>
<div class="page-header container">
<h1>
<a href="/">王者荣耀</a>
<small>英雄管理器</small>
</h1>
</div>
</header>
<div class="container hero-list">
<form id="form">
<div class="form-group">
<label for="exampleInputEmail1">英雄名称</label>
<input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="请输入英雄名称">
</div>
<div class="form-group">
<label for="exampleInputPassword1">英雄性别</label>
<div class="radio">
<label>
<input type="radio" name="gender" id="optionsRadios1" value="男" checked>男
</label>
<label>
<input type="radio" name="gender" id="optionsRadios1" value="女" checked>女
</label>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">英雄图片</label>
<p class="help-block">请上传英雄图片.</p>
</div>
<button type="submit" class="btn btn-success">点击保存</button>
</form>
<button type="submit" class="btn btn-success" onclick="window.location.href='/get?name=张三&age=18'">点击发送一个带参数的get请求</button>
<a href="/get?name=张三&age=18">不管是a标签还是按钮,只要是href路径都可以</a>
</div>
</body>
<script>
$('#form').on('submit', function (e) {
e.preventDefault();
$.ajax({
url: 'heroAdd',
type: 'get',
dataType: 'json',
data: $(this).serialize(),
success: function (data) {
}
});
});
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
1.2-服务端使用url模块解析get请求参数
var url = require('url');
console.log(encodeURI(req.url));
var parseObj = url.parse(req.url, true);
console.log(parseObj);
var pathname = parseObj.pathname;
console.log(pathname);
req.query = parseObj.query;
console.log(req.query);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 打印结果如下,下方这张图可以很好的解释每一个字段的含义
- 这里很多null的原因是我们客户端请求没有写完整的路径,直接是斜杠加路径,省略了我们的ip和端口号
Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: '?name=%E5%BC%A0%E4%B8%89&age=18',
query: { name: '张三', age: '18' },
pathname: '/get',
path: '/get?name=%E5%BC%A0%E4%B8%89&age=18',
href: '/get?name=%E5%BC%A0%E4%B8%89&age=18' }
var http = require('http');
var fs = require('fs');
var path = require('path');
var url = require('url');
var app = http.createServer();
app.on('request', function (req, res) {
console.log(encodeURI(req.url));
var parseObj = url.parse(req.url, true);
console.log(parseObj);
var pathname = parseObj.pathname;
console.log(pathname);
req.query = parseObj.query;
console.log(req.query);
if (pathname === '/heroAdd') {
fs.readFile('./heroAdd.html', function (err, data) {
if (err) {
throw err;
}
res.end(data);
});
} else if (pathname.indexOf('/node_modules') === 0) {
fs.readFile(__dirname + pathname, function (err, data) {
if (err) {
throw err;
} else {
console.log(data);
res.end(data);
}
});
} else {
res.end('请求路径: ' + req.url);
}
});
app.listen(3000, function () {
console.log('欢迎来到王者荣耀英雄管理器');
});