Ajax请求django返回json数据到前端 Ajax请求django返回json数据到前端

功能说明： Ajax请求接口，Django框架下从该接口接收Ajax发送的json数据，同时将新的json数据返回给Ajax，Ajax收到后在js进行处理，然后和页面内容交互。整个数据前后端交互全部采用json格式。
运行环境：后端：python3.7、Django2.2
前端：html+js+jquery3.1.1
全部代码： urls.py：完成在Django框架下的url映射

# -*- coding: utf-8 -*-from django.contrib import admin from django.urls import path from django.conf.urls import url from . import viewurlpatterns = [ path('admin/', admin.site.urls), url(r'^$', view.show),# 页面展示 url(r'^process$', view.process),# ajax请求接口 ]

view.py：后端的处理函数（显示页面与ajax接口）

# -*- coding: utf-8 -*-from django.http import HttpResponse from django.shortcuts import render_to_response from django.shortcuts import render from django.http import JsonResponsedef show(request): return render(request, 'show.html')def process(request): if request.is_ajax(): print(request.POST) data = https://www.it610.com/article/{'name': "candy", 'age': 13, } list = ['a', 'b', 'c', 'd'] response = JsonResponse({"status": '服务器接收成功', 'data': data, 'list': list}) return response

show.html：前端页面（包含js和ajax请求代码）

Title - 锐客网 {% csrf_token %} First name: Last name: Hello World!

结果演示：

文章图片

提交数据：

文章图片

点击提交按钮：

文章图片
点击确定后：

文章图片

后端打印出接收数据：

文章图片

本代码具备良好的拓展性，可直接迁移到任何项目中使用，作为示例，这里展示了几种数据格式直接封装在json中，传给前端后，我们可以直接在调试窗口看到数据，同时将其中的几部分内容分别显示到页面内容上，给input输入框赋值，使用弹框提示内容。
几点说明： 1、在django中使用JsonResponse()函数能够直接将json数据发送给前端，前端在js接收后不需要解码之类的操作，直接使用点操作运算符就能访问json数据的内容。
2、关于{% csrf_token %}的说明：这是Django 提供的 CSRF 防护机制
django 第一次响应来自某个客户端的请求时，会在服务器端随机生成一个 token，把这个 token 放在 cookie 里。然后每次 POST 请求都会带上这个 token，这样就能避免被 CSRF 攻击。
在本例中，我们在form表单中加入了“{% csrf_token %}”语句，并在页面js中使用

formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());

这一条js语句将token值添加到json数据中传给了后端，在pycharm的打印窗口也能看到。
3、在form表单中，提交按钮要这样书写：

type类型一般都为submit，但此时，虽然仍可以出发Ajax上传数据，但是同时这个提交按钮还具有表单提交的动作，即使在form的属性中没有定义action和method，此时当我们上传数据后，页面会重新刷新，导致无法获取到后端给我们的数据了。因此这里要把type变为button，在前端样式上其实没有什么区别，另外在通过Ajax交互时，可以不再使用from标签了。
4、在后端的处理中，我们使用

return render(request, 'index.html', {'data': data})

来返回数据时，虽然能够接收到数据，但是第一存在格式问题，需要更复杂的处理，较为麻烦；第二中文字符全部变为了十六进制表示格式。
5、当我们使用Django将数据附带在页面中传给前端时，需要使用json.dumps()处理，在前端的js中也需要加入safe过滤器。例如：

# -*- coding: utf-8 -*- import json from django.shortcuts import render def main_page(request): list = ['view', 'Json', 'JS'] return render(request, 'index.html', { 'List': json.dumps(list), })

在前端页面的js中使用时有：

var List = {{ List|safe }};

代码全部工程文件下载：点我下载：https://download.csdn.net/download/ximerr/11135664
参考文献： 1、Django 前后台的数据传递：
https://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html
2、Django 的 CSRF 保护机制：
【Ajax请求django返回json数据到前端】https://www.cnblogs.com/lins05/archive/2012/12/02/2797996.html
如有问题，欢迎交流 ^_^