Django 中使用Ajax请求

Django中使用Ajax请求

ajax

ajax = Asynchronous JavaScript and XML
异步的JavaScript 和XML。
ajax不是一门编程语言，而是一种使用现有标准的新方法。
ajax是一种在无需重新加载整个网页的情况下更新部分网页的技术。

JQuery

jQuery是一个JavaScript库，简化了JavaScript编程。

jquery + ajax

jQuery + ajax可以让我们的网站的请求变得更加简单。jQuery提供了多个与Ajax相关的方法，通过jQuery可以方便简单的使用Http Get 和 Http Post从远程服务器上获取文本，Html XML 或者Json，同时能够将这些外部数据直接载入网页中。

django中使用jQuery+ajax

在settings中配置静态文件地址

STATIC_URL = '/static/'

引入jQuery

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

使用方法名进行触发，

<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#newProductModal" onclick="getUsers()">
    <i class="glyphicon glyphicon-plus">
      添加
    </i>
 </button>

编写触发函数

function getUsers() {
                $.ajax({
                    url:'{% url 'ETP:getUsers' %}',
                    dataType:'json',
                    type:'GET',
                    timeout:2000,
                    success:function (data,status) {

                        initSelect('#form-field-select-participant',data);
                        initSelect('#form-field-select-member',data);
                        initSelect('#form-field-select-member_leader',data);
                        initSelect('#form-field-select-participant_leader',data);
                    },
                    error:function () {
                        alert('error')
                    }
                })
            }

POST请求方法

function createProduct() {
                var productName = $('#form-field-productname').val();
                var description = $('#form-field-description').val();
                var member_leader = $('#form-field-select-member_leader').val();
                var participant_leader = $('#form-field-select-participant_leader').val();
                var members = $('#form-field-select-member').val(); //数组
                var participants = $('#form-field-select-participant').val();
                var reqdata = {
                    "productName":productName,
                    "description":description,
                    "member_leaderId":member_leader,
                    "participant_leaderId":participant_leader,
                    "membersIds":members,
                    "participantsIds":participants,
                    "csrfmiddlewaretoken":"{{ csrf_token }}",
                    "user":"{{ user }}",
                };

                $.ajax({
                    url:'{% url 'ETP:createProduct' %}',
                    dataType:'json',
                    traditional:true,
                    type:'POST',
                    data:reqdata,
                    timeout:2000,
                    success:function (data) {
                        if (data.code=="-9"){
                            alert(data.message);
                        } else {
                            alert(data.message);
                            var openUrl_ = data.data.redirectURL;
                            window.location.href="/ETP/"+ openUrl_+"/";
                        }


                    },
                    error:function (data) {
                        alert(data.message);
                    }
                })
            }

python 后端的处理
urls文件

re_path(r'^createProduct/$', productViews.createProduct, name='createProduct'),
    re_path(r'^getParticipant/$', views.getUsers, name='getUsers'),

POST请求处理

def createProduct(request):
    respJson = {
        "code":"0",
        "message":"请求结果信息",
        "data":{}
    }
    if  request.method == 'POST':
        product_name = request.POST.get('productName')
        product_description = request.POST.get('description')
        member_leaderID = request.POST.get('member_leaderId')
        participant_leaderID = request.POST.get('participant_leaderId')
        membersIds = request.POST.getlist('membersIds')
        participantsIds = request.POST.getlist('participantsIds')
        userName = request.POST.get('user')
        user = User.objects.get(username=userName)
        hasProduct = False
        #判断是否存在重名的产品，如果不存在进行添加
        try:
            product = Product.objects.get(name=product_name)
            hasProduct = True
        except Exception as e:
            hasProduct = False

        if not hasProduct:
            memberLeader = User.objects.get(id=member_leaderID)
            participantLeader = User.objects.get(id=participant_leaderID)
            newproduct = Product.objects.create(name=product_name, date_added=timezone.now(),
                                                owner=user, member_leader=memberLeader,
                                                participant_leader=participantLeader, description=product_description)
            for membersId in membersIds:
                member = User.objects.get(id=membersId)
                newproduct.member.add(member)
            for participantsId in participantsIds:
                participant = User.objects.get(id=participantsId)
                newproduct.participant.add(participant)

            respJson = {
                "code": "0",
                "message": "产品添加成功",
                "data": {
                    "redirectURL":'products_new'
                }
            }
            return HttpResponse(json.dumps(respJson,ensure_ascii=False),content_type='application/json,charset=utf-8')
        else:
            respJson = {
                "code": "-9",
                "message": "系统中已经存在相同名称的产品，请更换名称",
                "data": {}
            }
            return HttpResponse(json.dumps(respJson,ensure_ascii=False), content_type='application/json,charset=utf-8')  # 使用json格式进行数据返回

GET请求处理

def getUsers(request):
    users = User.objects.all()
    data = []
    for user in users:
        resuser = {
            'user_id':user.id,
            'user_name':user.username
        }
        data.append(resuser)
    resusers = json.dumps(data)
    print(resusers)
    return HttpResponse(resusers,content_type='application/json,charset=utf-8')

至此，关于Django使用Ajax进行异步请求完成。哈哈哈啊哈哈
美滋滋~~