Ajax的post请求
使用Ajax发送POST请求
- 创建xhr
-
创建请求
1.将请求方式更改为post
2.如果有请求参数不能拼在url之后
- 设置回调函数
- 设置请求消息头
-
发送请求
示例
url.py 路由参考
# 使用ajax发送POST请求
url(r"^05-ajax-post/$", views.post_views),
url(r"^05-server/$", views.server05_views),
view.py 视图处理函数
def post_views(request):
return render(request, 'Ajax/05-post.html')
def server05_views(request):
uname = request.POST["uname"]
upwd = request.POST["upwd"]
msg = "用户名:%s,密码:%s" % (uname, upwd)
return HttpResponse(msg)
html 和js处理
Ajax/05-post.html 文件
{% csrf_token %} 处理 csrf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 创建异步对象
function createXhr() {
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
//console.log(xhr);
console.log('浏览器支持: XMLHttpRequest')
} else {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
//console.log(xhr);
console.log('浏览器支持ActiveXObject("")')
}
return xhr
}
</script>
<script src="/static/jquery-1.11.3.js"></script>
<script>
$(function () {
/**
* 为 #btnPost 绑定 click 事件
*/
$("#btnPost").click(function () {
//1.创建xhr
var xhr = createXhr();
//2.创建请求
xhr.open("post", "/ajax/05-server/", true);
//3.设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
//4.设置请求消息头
xhr.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded"
);
//5.发送请求
var uname = $("#uname").val();
var upwd = $("#upwd").val();
// 获取csrfmiddlewaretoken的值
var csrf = $("[name='csrfmiddlewaretoken']").val();
var params = "uname=" + uname + "&upwd=" + upwd + "&csrfmiddlewaretoken=" + csrf;
xhr.send(params);
});
});
</script>
</head>
<body>
{% csrf_token %}
<p>
用户名称 <input type="text" id="uname">
</p>
<p>
用户密码 <input type="password" id="upwd">
</p>
<p>
<input type="button" id="btnPost" value="提交">
</p>
</body>
</html>
效果样式
![TestLink导出用例转换工具(XML2Excel)[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)