实战Django之Ajax前后端交互

目录

1.创建Django项目

2.创建app（并且app目录下创建一个urls.py文件）

3.定义setting配置文件的静态目录路径和创建静态目录（我们需要js文件）

4.定义请求的URL路由分发

5.定义app下的URL路由

6.定义url对应函数处理

7.定义响应的html文件

8.启动Django

9.浏览器访问URL结果

1.创建Django项目

Django之创建项目【二】：https://blog.csdn.net/Burgess_zheng/article/details/86505526

2.创建app（并且app目录下创建一个urls.py文件）

进入项目目录下
创建app命令：
F:\Burgess\Python\pycharm实验脚本\test\project_burgess>python manage.py startapp submit_views

3.定义setting配置文件的静态目录路径和创建静态目录（我们需要js文件）

路径:project_burgess/project_burgess/setting

4.定义请求的URL路由分发

路径:project_burgess/project_burgess/urls.py

from django.contrib import admin
from django.urls import path,re_path #Django版本2.0以上
from project_burgess import views
from django.conf.urls import url  #Django2.0
from django.conf.urls import include

urlpatterns = [
    path('admin/', admin.site.urls),
   
    #提交各种数据数据类型测试
    re_path('submit/', include("submit_views.urls")),
    # url(r'^submit/', include("submit_views.urls")),

]

5.定义app下的URL路由

路径:project_burgess/submit_views/urls.py

__author__ = "Burgess Zheng"
#!/usr/bin/env python
#-*- coding:utf-8 -*-
from django.urls import path,re_path #Django版本2.0以上
from submit_views import views
from django.conf.urls import url  #Django2.0

app_name='namespace'
urlpatterns = [
    #ajax
    re_path('ajax/', views.ajax),
    # url(r'^ajax/', views.ajax),
]

6.定义url对应函数处理

路径:project_burgess/submit_views/views.py

def ajax(request):
    if request.method == "GET":
        return render(request, 'ajax.html')
    elif request.method == "POST":
        import json
        ret = {'status': True, 'error': None, 'data': None}
        try:  # 循环里面的内容
            h = request.POST.get('hostname')
            i = request.POST.get('ip')
            p = request.POST.get('port')
            b = request.POST.get('b_id')
            print('hostname:%s ip:%s port:%s b_id:%s'%(h,i,p,b))

            if h and len(h) > 5:  # 如果是真并且长度大于5 、if h ：如果h（内容不是空）为真
                #models.Host.objects.create(hostname=h, ip=i, port=p, b_id=b)
                 print('存入数据库成功')
            else:
                ret['status'] = False
                ret['error'] = "太短了"
        except Exception as e:  # 抓住Exception 所有的异常
            ret['status'] = False
            ret['error'] = '请求错误'
        print(ret)
        return HttpResponse(json.dumps(ret))  # 把字典序列成字符串返回给模板的ajax

7.定义响应的html文件

涉及到csrf跳转：Django之CSRF XSS原理解析 https://blog.csdn.net/Burgess_zheng/article/details/86548425

路径:project_burgess/templates/ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="add_form" method="POST" action="/submit/ajax/">
        {% csrf_token %}
        <a id="csrf" style="display: none">{{ csrf_token }}</a>
        <input type="text" name="hostname" style="display: block">
        <input type="text" name="ip" style="display: block">
        <input type="text" name="port" style="display: block">
        <input type="text" name="b_id" style="display: block">
        <input type="submit" name="submit提交">
        <input  id="ajax_submit" type="button" value="ajax提交">
        <span id="error_msg" style="color: red"></span>
    </form>

<script src="/static/jquery.min.js"></script>
<script>

    $('#ajax_submit').click(function () {
        $.ajax({
            url:"/submit/ajax/",
            type:'POST',
            //data:{'user':123,'host_list':{'key':'value','key':'value'}},
                //如果data提交的数据的字典里面的key的value是字典提交会报错如上：
                // 需要设置下面的参数：
            //traditional:true,

            //data:{'hostname':$('#host').val(),
            //		'ip':$('#ip').val(),
            //		'port':$('#port').val(),
            //		'b_id':$('#sel').val()
            //		},

            data:$('#add_form').serialize(),
            //ajax的data发送数据的时候可以一条命令解决==上面data发送的简写
            //只要匹配的from标签. serialize(), 该form标签的所有name的值都会发送过去

            headers:{'X-CSRFtoken':$('#csrf').text()},
            dataType:'JSON',
            //之前我们都需要在succses参数的function内里写Json.parse(data)对后端响应的数据字符串反序列化
            //如果写上 dataType:'JSON',自动把接收数据进行反序列化,succses参数的function内就无需进行反序列化

            //发送指定接收路径，请求类型，数据给后台，然后进入等待状态
            //直到收到后台的数据才执行下面的函数
            success: function(data){
                //var data = JSON.parse(data);
                    //JSON.parse（data）:把字符串转换成（反序列化）对象
                    //由于我们dataType参数设置了自动反序列化数据这里就注释掉
                    //如a =[1,2,3,4]
                    //JSON.stringigy(a):把对象转换成（序列化）字符串
                if(data.status){
                    location.reload();
                    //假如该status(key)的值是true,就为真，重新刷新页面
                    //对象就可以用点.取值
                    //提交后台判断成功之后的一些列操作
                }else {
                    //否则在匹配的标签添加内容
                    console.log(data);
                    $('#error_msg').text(data.error);

                }
            },
           error:function () {
   //出现未知的情况才执行这个函数，succses是只要发送到后台就算成功，获取错误信息返回给用户，成功后的事
           }
        })
    });

    //简单的写法（推荐上面的写法）
    //$.get(url="xx",data{},susccess:function(data){if....}
    // $.post(url="xx",data{},susccess:function(data){if....}
    // $.getJson(....}


</script>
</body>
</html>