django的Ajax,Ajax写一个get请求和post请求，用ajax实现验证用户名是否存在

一、django的Ajax

---

1.ajax介绍

---

ajax ： 异步的js和xml

普通请求：会携带整个页面提交，最明显的特征刷新页面，页面重置。好多的静态资源，页面不需要刷新，并且刷新的时候可能阻塞整个服务。

缺点：

• 用户体验特别差
• 请求内容和响应内容冗余

基于上面的问题，ajax出现了

ajax的优点：

• ajax能够发送局部的请求，页面整体不刷新，只是局部刷新
• ajax可以发送一个异步请求，请求的过程中不会阻塞整个服务

ajax需要使用js语法编写，原生的js比较复杂，因为各种浏览器都对ajax的兼容不一样，使用js编写ajax，首先需要完成各个浏览器对js 的实例创建。我们使用jq封装过的ajax。

---

2.ajax请求（结构，导包）

---

① 导包 jq （使用jq封装过的ajax）

---

---

ajax的结构

<script>
    //   通过 选择器        $("#id1").val()      获取值    $("#id2").click()
    $("#check_value").click(
        function () {
            username = $("#username").val();    // 获取姓名的值
            password = $("#password").val();    // 获取密码的值
            $.ajax(                               //  ajax 发起一个ajax请求
                {                                 //  ajax请求的数据需要放在一个对象中
                    url:'',                     // ajax 请求的路径
                    type:'',                     //  ajax 请求的类型
                    data:'',                    //  ajax 请求的数据  在post请求中 去填写
                    success:function (data) {     //  请求成功之后执行的   data 接口返回的数据
                        
                    },
                    error:function (error) {       //  请求报错之后执行
                        
                    }
                }
            )
        }
    )


</script>

---

3.ajax完成一个get请求

需要两个视图

1. 完成获取页面的功能
2. 接收ajax提交的请求，返回响应

---

完成用户名，密码校验的功能

模板：


视图： （需要两个视图，因为是局部刷新）

from django.http import JsonResponse
def ajax_get(request):
    return render(request,"ajax_get.html")
## ajax 完成一个 校验用户名  密码的案例
def ajax_get_data(request):
    result = {"code":10000,"content":""}
    data = request.GET
    username = data.get("username")
    password = data.get("password")
    if username is None or password is None:
        result['code'] = 10001
        result['content'] = "请求参数为空"
    else:
        user = User.objects.filter(name=username,password=setPassword(password)).first()
        if user:
            result['code'] = 10000
            result['content'] = "用户可登陆"
        else:
            result['code'] = 10002
            result['content'] = "用户不存在或者密码不正确"
    ##  返回一个json对象
    return JsonResponse(result)
    # return HttpResponse("这个是ajax提交数据")

---

ajax 发送一个get请求

需要两个视图

1. 一个视图提供页面（处理个get请求）
   1. 返回一个有表单，有ajax请求的页面
2. 第二个视图 接收ajax请求，处理请求，返回响应
   1. 返回响应 JsonResponse对象

---

4.ajax完成一个post请求

---

ajax_post请求跟get请求一样，需要两个视图，是一个post请求，但不同的是有CSRF的问题，

不同的地方：

• get请求拼接路径和参数 /index/?name=zhangsan&age=19
• post中只要请求路径 /index/
  • get请求 中的 type = get
• post构造数据字典
  • type = post
  • 构造字典的时候需要添加 csrf

---

模板：

<form action="" method="post">
     {% csrf_token %}
    名字：<input id = "username" type="text" name="username"><br>
    密码：<input id = "password" type="password" name="password"><br>
{#    <input type="submit" value="提交">#}
    <input id = "check_value" type="button" value="提交">

</form>


<script>
    $("#check_value").click(
        function () {
            // 获取值
            username = $("#username").val();
            password = $("#password").val();
            // 构造数据字典
            send_data = {
                "username":username,
                "password":password,
                "csrfmiddlewaretoken":"{{ csrf_token }}",
            };
            console.log(send_data)
            //url值
            url = "/ajax_post_data/";
            $.ajax(
                {
                    url:url,
                    type:"post",
                    data:send_data,
                    success:function (data) {
                        console.log(data);
                    },
                    error:function (error) {
                        console.log(error);
                    }
                }
            )

        }
    )


</script>

视图：

## 通过post进来的不用判断是不是post
def ajax_post_data(request):
    result = {"code":10000,"content":""}
    username = request.POST.get("username")
    password = request.POST.get("password")
    if len(username) == 0 or len(password) == 0:
        result["code"] = 10001
        result["content"] = "请求参数为空"
    else:
        ## 添加用户
        user = User()
        user.name = username
        user.password = setPassword(password)
        try:
            user.save()
            result["code"] = 10000
            result["content"] = "用户添加成功"
        except:
            result["code"] = 10002
            result["content"] = "添加用户错误"
    return JsonResponse(result)

---

5.通过ajax判断用户是否存在

---

当失去焦点的时候，判断用户是否存在

• 局部刷新 ajax（写出ajax代码）
• 提交地址 （处理业务的视图）
  • 视图中 获取传过参数，判断用户名是否存在
    • 不存在： 返回结果
    • 存在： 返回结果
• 页面，拿到结果 进行渲染

---

视图：

def ajax_post(request):

    return render(request, 'ajax_post.html')

## 校验用户名是否存在
def checkusername(request):
    result = {'code':10001,"content":""}
    #get 请求
    username= request.GET.get("name")
    print (username)
    # 判断用户是否存在
    user = User.objects.filter(name=username).first()
    if user:
        ## 存在
        result = {'code': 10001, "content": "用户名已存在"}
    else:
        result = {'code': 10000, "content": "用户名不存在"}
    return JsonResponse(result)

模板：

<body>

<form action="" method="post">
     {% csrf_token %}
    名字：<input id = "username" type="text" name="username"><br>
    密码：<input id = "password" type="password" name="password"><br>
{#    <input type="submit" value="提交">#}
    <input id = "check_value" type="button" value="提交">

</form>
<p id="text"></p>


<script>

    $("#username").blur(
        function () {
            username = $("#username").val();
            url = '/checkusername/?name='+username
            $.ajax(
                {
                    url:url,
                    type:'get',
                    data:'',
                    success:function (data) {
                        $("#text").text(data.content);
                    },
                    error:function (error) {
                        $("#text").text(error);
                    }
                }
            )

        }
    )

</script>

---