django 服务器端有数据前端没有显示,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 view

urlpatterns = [

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 JsonResponse

def show(request):

return render(request, 'show.html')

def process(request):

if request.is_ajax():

print(request.POST)

data = {

'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 保护机制：

https://www.cnblogs.com/lins05/archive/2012/12/02/2797996.html

如有问题，欢迎交流 ^_^