1. 在项目中前后端数据相互是一种常态, 前后端交互使用的是ajax请求和form表单的请求两种方式"
ajax与form表单的区别在于: form 是整个页面刷新提交的, 但是ajax 是局部提交 局部验证的, 这个是他们的唯一区别
2. 前端ajax请求方式:
$.ajax({ url: '/ajax/', # 请求路径 type: 'post', # 请求方式 data: { # get和post都以data字典方式携带数据 usr: $('.usr').val(), # 获取输入框内容 pwd: $('.pwd').val(), }, success: function (data) { console.log(typeof(data), data); # 得到后台返回的数据（普通字符串 | json类型数据） } })
3. 后端接受ajax请求的相应方式:
from django.http import JsonResponse # 返回json类型数据的终极方法 dic = {'status': 'ok', 'msg': '登录成功'} return JsonResponse(dic, safe=False, json_dumps_params={'ensure_ascii': False}) # ***** # 参数含义： # 返回值保证是字典类型 # safe在False情况下就支持返回列表或字符串 # 取消json的dumps方法采用的默认ascii编码中文
def ajax(request): print(request.is_ajax()) if request.method == 'GET': usr = request.GET.get('usr', None) pwd = request.GET.get('pwd', None) print('get>>>', usr, pwd) msg = request.GET.get('msg', None) print('get>>>', msg) if request.method == 'POST': usr = request.POST.get('usr', None) pwd = request.POST.get('pwd', None) print('post>>>', usr, pwd) msg = request.GET.get('msg', None) print('post>>>', msg) # ajax请求，后台只需要返回信息，所以不会出现render、redirect # 1、返回字符串类型数据 # return HttpResponse('OK') # 2、返回json类型数据 # dic = {'status': 'ok', 'msg': '登录成功'} # data = json.dumps(dic, ensure_ascii=False) # 直接返回json模块处理后的json数据(json字符串)，前台接收到的是一个json类型的字符串 # return HttpResponse(data) # 返回json字符串是，还告诉前台，该数据就是json类型字符串 # return HttpResponse(data, content_type='application/json') # 3、直接通过JsonResponse返回json数据 dic = {'status': 'ok', 'msg': '登录成功'} # 返回值保证是字典类型 # safe在False情况下就支持返回列表或字符串 # 取消json的dumps方法采用的默认ascii编码中文 return JsonResponse(dic, safe=False, json_dumps_params={'ensure_ascii': False})
前端
<body>
{# form表单提交数据：form提交数据后，一定会发生页面的跳转 #}
{# ajax提交数据：只向后台请求数据，请求的过程是异步的，请求成功后有一个回调函数，携带后台返回的数据 #}
<form action="/form/" method="post">
<input class="usr" type="text" name="usr">
<input class="pwd" type="password" name="pwd">
<input class="ajax-submit" type="button" value="登录">
<input class="ajax-submit_bac" type="button" value="了解">
</form>
</body>
<script> $('.ajax-submit').click(function () { {#window.alert(123)#} {#window.document.getElementById()#} {#window.location.href = 'https://www.baidu.com'#} $.ajax({ {#注：url中可以拼接请求数据，get|post方式在后台都通过GET对象获取该数据#} url: '/ajax/?msg=qwer', type: 'post', data: { usr: $('.usr').val(), pwd: $('.pwd')[0].value, }, {#ajax发生get|post请求，用data携带数据#} success: function (data) { {#返回值为普通字符串#} {#console.log(">>>>", data);#} {#alert(data);#} {#window.location.href = data#} {#返回值为json类型数据#} console.log(typeof(data), data); {#前台如何处理json类型字符串#} {#data = JSON.parse(data);#} {#console.log(typeof(data), data, data.msg);#} }, error: function (e) { } }) }) $('.ajax-submit_bac').click(function () { {#jsonStr = '{"name": "Bob"}';#} dic = { name: 'HOU' }; jsonStr = JSON.stringify(dic); $.ajax({ url: '/ajax-bac/', type: 'post', {# dataType: 'json', 了解：告诉jq，一定按json类型数据解析（默认后台返回的一定是json类型数据, 如果不是就拿不到结果） #} {# 前台主动传入json类型的字符串, 后台需要手动处理body（前台json数据类型还不能错） #} contentType: 'application/json', data: jsonStr, success: function (data) { console.log(typeof(data), data); }, error: function (e) { console.log(e) } }) }) </script>