Ajax简单运用（JavaScript-----jQuery-------）

首先引用 jQuery

 <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>

写一个简单的表单

    <form id="f1" method="POST" action="/form_login/">
                         {% csrf_token %}
            <p>用户：<input id="title_1" type="text" name="username"/></p>
            <p>密码：<input type="password" name="password"/></p>
            <p><input type="submit" name="提交">{{message}}</p>
            <a onclick="abc()">提交</a>    {# 点击链接到JavaScript函数 #}
        </form>

相关视图函数

from django.forms import Form,fields,widgets
class FormLogin(Form):

       username=fields.CharField(min_length=6,max_length=18,required=True,
                                 error_messages={
                                     'required':'用户名不能为空',
                                     'min_length':'最小长度为6',
                                     'max_length':'最大长度18',
                                 }
                                 )
       #里面就包含了正则验证：不能为空、6-18
       #这个要html里面的name属性一样
       #写几个就验证几个规则
       password = fields.CharField(min_length=6, max_length=18, required=True,
                                   error_messages={
                                       'required': '密码不能为空',
                                       'min_length': '最小长度为6',
                                       'max_length': '最大长度18',
                                   }
                                   )
       # t1 = fields.IntegerField  # 数字正则表达式
       # t2 = fields.EmailField()  # 邮箱正则表达式
       # email=fields.GenericIPAddressField()  #IP正则表达式

def form_login_ajax(request):
        import json
        ret={'status':True, 'msg':None} #有个状态，方便后面判断
        obj = FormLogin(request.POST)
        if obj.is_valid():  # 去匹配
            print(obj.cleaned_data)  # 正确的信息
            #return redirect('http://www.baidu.com')
        else:
            print(obj.errors)

            # v=json.dumps(obj.errors,ensure_ascii=False)#通过json 对它序列化
            # print(v)
            ret['status']=False
            ret['msg']=obj.errors   #obj.errors是个字典
        v=json.dumps(ret,ensure_ascii=False)  #为了能打印出来
        print(v)
        return HttpResponse(v)  #也能返回render（本质还是HttpResponse），但是这里返回这个比较好，弄个json.domp字典返回最好

        # return render(request, 'form_login.html', {'obj': obj, 'user': user, 'pwd': pwd})
        #完成验证和提示错误，但是无法保留Form表单上次输入内容

发送Ajax请求和接受视图函数返回的数据并且处理

 <script>

    function abc(){
            $('.c1').remove();  //(jQuery  类选择器)
           $.ajax(
             {
                url:'/form_login_ajax/',
                type:'POST',
                data:$('#f1').serialize(),

                dataType:"JSON",   //将序列化的json转化为对象
                success:function(data){
                   console.log(data);
                   console.log(data.status);   //status是后台传过来的字典的key
                   if(data.status){  //若是提交成功的话
                       alert('提交成功')
                       $("#f1").hide();//皮一下，输入成功后，输入框消失(jQuery  id选择器)
                   }else{
                     $.each(data.msg,function(index,value){   //对data.msg进行循环
                        console.log(index,value);             //取其index(key),value
                        var tag=document.createElement('span');  //创建一个名为tag的span标签
                        tag.innerHTML=value[0];    //取value第一个值
                        console.log(value[0]);
                        console.log(tag);
                        tag.className='c1';  //给标签加一个样式  目的：等到下次来的时候给它删除（避免累加提示错误）
                        $('#f1').find('input[name="'+index+'"]').after(tag);  //input[name=" user "]'   ,不能有多余的空格
                        //找到id为f1的表格，下面找到input name=x，加入tag标签
                        })
                   }

                                   }

                })
              }

 </script>

 

ps:

问题待补充:

jQuery  三大选择器  除了能   .remove()    .hide()  还能.什么，哪里可以查到相关的全部