一：ajax请求图例：
二：views.py中的代码
def login_ajax_handle(request):
"""ajax登录处理"""
# 获取用户名和密码
u = request.POST.get("username")
p = request.POST.get("password")
# 进行校验
if u == "smart" and p == "123":
# 用户名和密码正确
# ajx请求返回的就是json数据,不能返回页面或重定向
return JsonResponse({"res": 1})
else:
# 用户名和密码错误
return JsonResponse({"res": 0})
三：html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<meta charset="UTF-8">
<title>登录页面</title>
<script src="{% static 'js/jquery-1.12.4.js' %}"></script>
<script>
$(function () {
$("#btnLogin").click(function () {
// 获取用户名和密码
var u = $("#username").val();
var p = $("#password").val();
// 此参数需要传递给后端,否则会csrf禁止,报403错误
var csrf = $('input[name="csrfmiddlewaretoken"]').val();
// 发起ajax请求
$.ajax({
url: "/login_ajax_handle/", // 请求的地址
type: "post", // 请求方式
// 请求时传递过去的数据
data:{"username": u, "password": p, 'csrfmiddlewaretoken': csrf},
dataType: "json", // 返回的数据格式
async: true, // 异步的ajax
}).success(function (data) {
if(data.res == 1){
// 请求成功实现页面跳转
window.location.href = "/index/";
}
else if(data.res == 0){
// 请求失败，显示错误信息
$("#errmsg").show();
$("#errmsg").html("用户名或密码错误");
}
})
})
})
</script>
<style>
#errmsg{
display: none;
color: red;
font-size: 8px;
}
</style>
</head>
<body>
{# post请求必须加上下面这个变量 #}
{% csrf_token %}
<div>
用户名: <input type="text" id="username"><br>
密 码: <input type="password" id="password"><br>
<div id="errmsg"></div>
<input type="button" id="btnLogin" value="登录">
</div>
</body>
</html>四、第二种ajax发送post请求案例：
直接获取表单中的所有数据，然后发送请求，表单中记得写上{% csrf_token %}即可，比上面一种要简单一些
（1） html中的代码
<div class="right companyright">
<div class="head">我要学习</div>
<form class="rightform" id="jsStayForm">
{% csrf_token %}
<div>
<img src="{% static 'images/rightform1.png' %}"/>
<input type="text" name="name" id="companyName" placeholder="名字" maxlength="25"/>
</div>
<div>
<img src="{% static 'images/rightform2.png' %}"/>
<input type="text" name="mobile" id="companyMobile" placeholder="联系电话"/>
</div>
<div>
<img src="{% static 'images/rightform3.png' %}"/>
<input type="text" name="course_name" id="companyAddress" placeholder="课程名" maxlength="50"/>
</div>
<p class="error company-tips" id="jsCompanyTips"></p>
<input class="btn" type="text" id="jsStayBtn" value="立即咨询 >"/>
</form>
</div>（2） js代码
$(function () {
$(document).ready(function () {
$('#jsStayBtn').on('click', function () {
$.ajax({
cache: false,
type: "POST",
url: "{% url 'org:add_ask' %}",
data: $('#jsStayForm').serialize(),
async: true,
success: function (data) {
if (data.status == 'success') {
$('#jsStayForm')[0].reset();
$('#jsCompanyTips').html("");
setTimeout(function () {
alert("提交成功")
}, 200);
} else if (data.status == 'fail') {
$('#jsCompanyTips').html(data.msg)
}
},
});
});
});
})五. 第三种发送ajax发送Post请求的方法
（1）js代码
<script type="text/javascript">
//收藏分享
function add_fav(current_elem, fav_id, fav_type) {
$.ajax({
cache: false,
type: "POST",
url: "{% url 'ope:add_fav' %}",
data: {'fav_id': fav_id, 'fav_type': fav_type},
async: true,
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success: function (data) {
if (data.status == 'fail') {
if (data.msg == '用户未登录') {
window.location.href = "{% url 'users:login' %}";
} else {
alert(data.msg)
}
} else if (data.status == 'success') {
current_elem.text(data.msg)
}
},
});
}
$(document).ready(function () {
$('#jsLeftBtn').on('click', function () {
add_fav($(this), {{ course.id }}, 1);
});
});
$(document).ready(function () {
$('#jsRightBtn').on('click', function () {
add_fav($(this), {{ org.id }}, 2);
});
});
</script>六. 第四种发送ajax发送Post请求的方法
<script type="text/javascript">
//添加评论
$(document).ready(function () {
$('#js-pl-submit').on('click', function () {
var comments = $("#js-pl-textarea").val()
if (comments == "") {
alert("评论不能为空")
return
}
$.ajax({
cache: false,
type: "POST",
url: "/course/add_comment/",
data: {'course_id': {{ course.id }}, 'comments': comments},
async: true,
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success: function (data) {
if (data.status == 'fail') {
if (data.msg == '用户未登录') {
window.location.href = "login.html";
} else {
alert(data.msg)
}
} else if (data.status == 'success') {
window.location.reload();//刷新当前页面.
}
},
});
});
});
</script>
更多推荐
django中ajax发送post请求的几种方法
发布评论