Django之前端ajax请求数据

野性酷女 2022-01-12 10:19 262阅读 0赞

## POST请求： ##

$.ajax({
         type:'POST',
         url:'{% url 'operations:user_ask' %}',
         data:{
             'name':name,
             'phone':phone,
             'course':course,
             'csrfmiddlewaretoken':'{
       { csrf_token }}'
         },
         success:function(data){
             console.log(data)
         }
     })

Form配置，编写验证规则

from django import forms
    from .models import UserAsk
    class UserAskForm(forms.ModelForm):
        class Meta:
            model = UserAsk
            #使用字段较少的话可以单独列出来
            #fields = ['name','phone','course']
            #使用字段较多的话，可以将不需要的字段排除出去
            exclude = ['add_time']
            #如果用到了全部字段，可以用下面的方法
            #fields = '__all__'
        #添加自定义规则
        def clean_phone(self):
            #重新去cleaned_data中将需要的值给取出来
            phone = self.cleaned_data['phone']
            #建立正则对象
            com = re.compile('^(((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(16[6])|(17[0135678])|(18[0-9])|(19[89]))\\d{8})$')
            #如果有返回值，则表示验证成功
            if com.match(phone):
                return phone
            else:
                #验证失败
                raise forms.ValidationError('手机号填写错误')

后台处理：  
urls.py中编写路由

from django.urls import path
    from apps.operations import views
    app_name = 'operations'
    
    urlpatterns = [
    	#两种接口编写方式对应两种路由的写法
        path('user_ask/', views.user_ask, name='user_ask'),
        path('user_ask/', views.UserAskView, name='user_ask'),
    ]

views.py中编写接口逻辑

from django.shortcuts import render,HttpResponse,redirect
    from .forms import UserAskForm
    from django.http import  JsonResponse
    from django.views.generic import View
    #两种编写接口的方式
    #函数式
    def user_ask(request):
        user_ask_form = UserAskForm(request.POST)
        if user_ask_form.is_valid():
            #form实例可以直接保存提交，不需要单独写，保存form就相当于保存model
            user_ask_form.save(commit=True)
            return JsonResponse({'status':'ok','msg':'请求成功'})
        else:
            return JsonResponse({'status': 'fail', 'msg': '请求失败'})
            
    #类式
    class UserAskView(View):
    	#需要严格表明请求方式
    	def get(self,request):
    		#里面的内容和函数式相同
    		user_ask_form = UserAskForm(request.POST)
            if user_ask_form.is_valid():
                #form实例可以直接保存提交，不需要单独写，保存form就相当于保存model
                user_ask_form.save(commit=True)
                return JsonResponse({'status':'ok','msg':'请求成功'})
            else:
                return JsonResponse({'status': 'fail', 'msg': '请求失败'})
         def post(self,request):
         	...

## GET请求 ##

$.ajax({
        type:'GET',
        url:"{% url 'operations:user_love' %}",
        data:{
            'love_id':love_id,
            'love_type':love_type
        },
        success:function(data){
            if(data.status == 'ok'){
                $('#love').text(data.msg)
            }
        }
    })

后端配置

#用户搜藏
    def user_love(request):
        love_id = request.GET.get('love_id','')
        love_type = request.GET.get('love_type','')
        love_man = request.user
        if love_id and love_type:
            #表里查看是否有当前搜藏的信息
            love = UserLove.objects.filter(love_id=int(love_id),love_type=int(love_type),love_man=love_man)
            if love:
                #根据表里查到的搜藏状态去进行处理
                if love[0].love_status:
                    # 取消搜藏
                    love[0].love_status = False
                    love[0].save()
                    return JsonResponse({'status':'ok','msg':'收藏'})
                else:
                    # 搜藏
                    love[0].love_status = True
                    love[0].save()
                    return JsonResponse({'status': 'ok', 'msg': '取消收藏'})
            else:
                a = UserLove()
                a.love_id = int(love_id)
                a.love_type = int(love_type)
                a.love_status = True
                a.love_man = love_man
                a.save()
                return JsonResponse({'status': 'ok', 'msg': '取消收藏'})
        else:
            return JsonResponse({'status': 'fail', 'msg': '请求失败'})