jquery的post请求
2018-10-23 本文已影响9人
转身丶即天涯
接着昨天的get请求说，今天我们尝试写一个post请求，并发送到服务器。
昨天的后端代码要加一个接口，用来接收我们的前端发送的post请求。
先给后端加一个接口
image.png
这里有两个红框，request是flask中的请求对象，因为我们需要用它来获取请求中的参数(不论是get方法还是post方法)。Response用来构造要返回的对象。methods需要用数组的形式标注一下，不然默认login函数只能通过get方式请求。
这些都不是重点，下面我们写前端的post请求。
新建一个html文件，然后看一下代码：
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<title>jquery发送请求</title>
</head>
<body>
<button id="btn">点击发送post请求</button>
<div id="content"></div>
<script>
$(function() {
$('#btn').click(function() {
$.post(
'http://127.0.0.1:5000/login',
{
username: 'admin',
password: '123'
},
function(result) {
alert(JSON.stringify(result));
$('#content').text(JSON.stringify(result));
}
);
});
});
</script>
</body>
</html>
记得引入jquery.js哦，不然<script>中的代码会报错的。
语法格式：$.post(url, data, function)
我们这次是发送的post请求，并在请求的data中加入两个字符串，用来表示用户名和密码，从而模拟登陆。请求发送到接口上时，后端通过request.form[key]的形式来读取参数，并对传入的参数进行校验，校验成功后返回“login success”，否则返回“login failed.”。最后把返回的结果序列化，并写入到div中。
简单吧，很多我们原来觉得难的东西也就那么回事！
加油！
