Django与Ajax使用

2020-01-13 15:10:40 最后一行代码 阅读:516

分类: Django

什么是Ajax

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。Ajax技术可以在不刷新页面的情况下完成与服务器的数据交互,常用于创建动态页面。Ajax技术应用十分广泛,例如微博的评论,用户提交评论后会根据用户提交的评论内容在评论区动态生成。

 

Ajax使用实例

实现一个登录功能,后端写用户验证逻辑,前端提交数据。代码就不写的那么花里胡哨了,简洁点方便学习。

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="/static/jquery-3.3.1.js"></script>
</head>
<body>
	<div>
		<form action="" id="form">
			{% csrf_token %}
			用户名<input type="text" name="username">
			密码<input type="password" name="password">
			<button>登录</button>
			<div class="success" style="color: rgb(0,255,0)"></div>
			<div class="error" style="color: red"></div>
		</form>
	</div>
	
	<script>
		$('#form').submit(function(){
			$.ajax({
				url: "{% url 'login' %}",
				type: 'post',
				data: $('#form').serialize(),
				success: function(data){
					console.log(data)
					if (data['state']){
						$('.success').text(data['message']);
					};
					if (!data['state']){
						$('.error').text(data['message'])
					};
				},
				error: function(xhr){
					console.log(xhr)
				},
			});
			return false;
		})
	</script>
</body>
</html>

{% csrf_token %} 因为我们使用的POST请求,所以必须在表单中指定该标签。

$('#form').submit(function(){}) 表示监听form表单提交,当用户点击登录按钮会执行指定的回调函数。该回调函数最后"return false"表示取消form表单的默认行为,如不指定则在点击登录按钮时会刷新页面。

ajax函数中参数:

url值为请求地址,其实{% url 'login' %}模板标签返回的就是"/login/",所以也可以直接使用"/login/"同样可以发送请求。注意:如果在<script>标签中使用模板标签需要使用双引号包起来。

type值用来指定请求方式,如GET、POST

data值为请求数据,会自动转换为查询字符串。如果想将表单中所有数据都转换为查询字符串,可使用jQuery的.serialize()方法。

success值为回调函数,当ajax请求成功时调用,形参data用来接收后端返回的JSON对象。

error值也是回调函数,当ajax请求失败时调用,形参xhr用来接收传递过来的XMLHttpRequest对象,它包含了错误信息。

 

Django:

from django.urls import path
from . import views

urlpatterns = [
    path('login/', views.login, name='login')   # name参数表示指定该路由的别名
]
from django.shortcuts import render
from django.http import JsonResponse

def login(request):
	if request.method == 'POST':
		username = request.POST.get('username','')
		password = request.POST.get('password','')
		if (username == '9527') and (password == '123456'):
			data = {"state": True, "message": "登录成功"}
		else:
			data = {"state": False, "message": "用户名或密码错误"}
	return JsonResponse(data)

在视图函数中通过request.method属性判断是否为POST请求。

request.POST属性可以获取前端发送的请求数据,字典类型。

我们假设用户名是9527,密码是123456。判断用户提交的用户名密码是否正确。

JsonResponse() 用于返回JSON数据。

回复:

快来抢沙发

老板赏瓶水呗
微信 微信 支付宝 支付宝