python - ajax - 提交表单

 

1.　静态页面 

 

<div class="panel panel-default">
      <div class="panel-heading"> 小案例 ajax学习之路 - jq 绑定事件 - 表单提交   </div>
      <div class="panel-body">
         <form method="post" id="addform" novalidate>

            {% for field in form %}
                <div class="form-group">
                    <label for="exampleInputEmail1"> {{ field.label }}</label>
                     {{ field }} <span style="color:red" class="error-msg">  </span>
              </div>
            {% endfor %}

              <button type="button" id="btnadd" class="btn btn-primary">提交</button>
        </form>

      </div>
</div>

<script type="text/javascript">

    $(function (){
 
        bindBntaddEvent();
    })

    

    function bindBntaddEvent(){
        $('#btnadd').click(function (){
            $.ajax({
            url: '/task/add/',
            type: 'post',
            // 获取表单中的所有数据
            data:$('#addform').serialize(),
            dataType:'JSON',
            success:function (res){
                $('.error-msg').empty();
                if (res.status){
                    alert('添加成功');
                    //js刷新页面
                    location.reload();
                 } else{
                    //console.log(res.error)
                    // 拿到错误数据 循环出来 键值对
                    $.each(res.error, function (name, data){
                        // 显示 需要的 name 与 data
                        //console.log(name, data)
                        // 拼接字符转id_title
                        $('#id_' + name).next().text(data[0]);
                    })
                 }
            }
            })
        })
    }

 
</script>

 

2.　　views.py 代码 

from django.shortcuts import render, HttpResponse, redirect

# 免除认证 发送消息
from django.views.decorators.csrf import csrf_exempt

from app import models
from app.utils.bootsrap import BootstrapModelForm

# 返回json
from django.http import JsonResponse

'''为接受数据创建一个 modelform '''
class TaskModelForm(BootstrapModelForm):
    class Meta:
        model =models.task
        fields = '__all__'


''' ajax 表单 提交'''
@csrf_exempt
def task_add(request):
    # 数据校验
    form = TaskModelForm(request.POST)
    if form.is_valid():
        # 验证成功
        form.save()
        data_dict = {'status': True}
        return JsonResponse(data_dict)

    # 验证失败
    data_dict = {'status': False, 'error': form.errors}
    return JsonResponse(data_dict)