Ajax案例（任务管理，续接前篇Ajax学习）

准备：

 

//为了使外键（下拉框）

 

 

 

 

 

 

import json
from django import forms
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt
from app01 import models

from app01.utils.bootstrap import BootStrapModelForm


class TaskModelForm(BootStrapModelForm):
    class Meta:
        model=models.Task
        fields="__all__"
        widgets={
            # "detail":forms.Textarea,
            "detail":forms.TextInput
        }
@csrf_exempt
def task_ajax(request):
    '''验证ajax请求'''
    # print(request.GET)
    print(request.POST)

    data_dict={"status":True,"data":[11,22,33,44]}
    json_string=json.dumps(data_dict)
    return HttpResponse(json_string)

@csrf_exempt
def task_list(request):
    '''任务列表'''
    form=TaskModelForm
    return render(request,'task_list.html',{"form":form})
@csrf_exempt
def task_add(request):
    print(request.POST)
    #1,对数据进行校验(ModelForm)
    form=TaskModelForm(data=request.POST)
    if form.is_valid():
        form.save()
        data_dict = {"status": True}
        return HttpResponse(json.dumps(data_dict))
    data_dict={"status":False,"error":form.errors}
    #  ensure_ascii=False,显示中文
    return HttpResponse(json.dumps(data_dict,ensure_ascii=False))

 

 

 

 

 

 

 

 

{% extends 'layout.html' %}

{% block title %}
    <title>任务列表</title>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">表单</div>
            <div class="panel-body">
                <form id="formAdd">
                    <div class="clearfix">
                        {% for field in form %}
                            <div class="col-xs-6">
                                <div class="form-group" style="position: relative;margin-bottom: 20px;">
                                    <label>{{ field.label }}</label>
                                    {{ field }}
                                    <span class="error-msg" style="color: red;position: absolute;"></span>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="col-xs-12">
                            <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>


        <hr/>
        <h1>Ajax学习</h1>

        <h3>示例1</h3>
        <input type="button" class="btn btn-primary" value="点击1" id="btn1">

        <h3>实例2</h3>
        <input type="text" id="txtUser" placeholder="姓名">
        <input type="text" id="txtAge" placeholder="年龄">

        <input id="btn2" type="button" class="btn btn-primary" value="点击2">

        <h3>实例3</h3>
        <form id="form3">
            <input type="text" name="User" placeholder="姓名">
            <input type="text" name="Age" placeholder="年龄">
            <input type="text" name="Email" placeholder="邮箱">
            <input type="text" name="More" placeholder="介绍">
            <input id="btn3" type="button" class="btn btn-primary" value="点击3">
        </form>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            //页面框架加载完成后代码自动执行
            bindBtn1Event();
            bindBtn2Event();
            bindBtn3Event();

            bindBtnAddEvent();
        })
        function bindBtn1Event() {
            $("#btn1").click(function () {
                $.ajax({
                        url: '/task/ajax',
                        type: "post",
                        data: {
                            n1: 123,
                            n2: 456
                        },
                        {#请求成功后，执行的函数#}
                        dataType: "JSON",
                        success: function (res) {
                            console.log(res);
                            console.log(res.status);
                            console.log(res.data);
                        }
                    }
                )
            })
        }
        function bindBtn2Event() {
            $("#btn2").click(function () {
                $.ajax({
                        url: '/task/ajax',
                        type: "post",
                        data: {
                            name: $("#txtUser").val(),
                            age: $("#txtAge").val(),

                        },
                        {#请求成功后，执行的函数#}
                        dataType: "JSON",
                        success: function (res) {
                            console.log(res);
                            console.log(res.status);
                            console.log(res.data);
                        }
                    }
                )
            })
        }
        function bindBtn3Event() {
            $("#btn3").click(function () {
                $.ajax({
                        url: '/task/ajax',
                        type: "post",
                        data: $("#form3").serialize(),
                        {#请求成功后，执行的函数#}
                        dataType: "JSON",
                        success: function (res) {
                            console.log(res);
                            console.log(res.status);
                            console.log(res.data);
                        }
                    }
                )
            })
        }
        function bindBtnAddEvent() {
            $("#btnAdd").click(function () {
                {#清除错误信息#}
                $(".error-msg").empty();
                $.ajax({
                        url: '/task/add',
                        type: "post",
                        data: $("#formAdd").serialize(),
                        {#请求成功后，执行的函数#}
                        dataType: "JSON",
                        success: function (res) {
                            if(res.status){
                                alert("添加成功")
                            }else {
                                $.each(res.error,function (name,data){
                                    {#console.log(name,data)#}
                                    {#提示错误信息#}
                                    $("#id_"+name).next().text(data[0]);
                                })
                            }

                        }
                    }
                )
            })
        }

    </script>
{% endblock %}