ajax详解

- ajax

　　往后台提交数据，form表单标签

　　js语言中封装的一个发送http请求的模块，xmlhttprequest对象，经过jquery的封装起名为ajax

　　AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

　　a.同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

　　b.异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

　　　AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程

　　同步提交: 当点击提交后必须等待响应完成后才能继续操作网页

　　异步提交: 当点击提交后还可以继续操作网页中的其他内容,不用等待响应数据

　　

- ajax 应用场景:

　　1.我们在登录或者注册某网站用户时经常会输入用户名,密码,邮箱地址,手机号,身份证号...等等, 如果我们输入了一堆信息点击提交但发现有一项输入错误了,这时你点提交了那么可能之前输入的信息全没有了,还得重新再输入一遍,你肯定会觉得很不爽,瞬间没有了再浏览下去的心情了吧,那这是怎么回事呢?之前输入的信息怎么就没有了呢,这是因为你点击提交后整个网页刷新了,所以之前输入的信息全没有了,这就是没有使用ajax技术,那么ajax是什么?它就是一个异步的网页局部刷新技术,像刚才那种情况如果使用了Ajax技术,那么我们点击提交之后只会提示我们输入错误的那一项,而其他输入的信息依然还在,我们只需要修改输入错误的那项再次提交就可以了,是不是觉得比之前的好多了,这就是ajax.

示例代码:

def login(request):

    if request.method == 'GET':
        # return render(request, 'login.html')
        ret = render(request, 'login.html')
        # 修改响应状态码
        ret.status_code = 202
        #
        return ret

ajax代码

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color:Red;
            font-size: 12px;
        }
    </style>
</head>
<body>


<form action="" method="post">

    用户名： <input type="text" name="username">
    密码： <input type="password" name="password">
    <input type="submit">

</form>

<hr>
    用户名： <input type="text" id="uname">
    密码： <input type="password" id="pwd">
    <span class="error"></span>
    <button id="btn">ajax提交</button>


</body>
<script src="{% static 'jquery.js' %}"></script>
<script>
    // ajax发送请求提交数据
    $('#btn').click(function () {

        var uname = $('#uname').val();
        var pwd = $('#pwd').val();

        $.ajax({
            {#url:'http://127.0.0.1:8001/ajax_login/', // 请求路径 绝对路径 #}
            url:'/ajax_login/', // 请求路径  相对路径
            type:'post',  // 请求方法，小写
            {#data:{a:1,b:2}, // 请求携带数据#}
            data:{username:uname, password:pwd},

            // 接受请求成功之后的响应数据的，res接受到的就是响应数据，
            // ajax会判断响应状态码，当状态码为2xx,3xx等时，那么表示请求和响应是正常的，那么ajax会将响应数据进行加工，并传递给success对应的匿名函数作为他的参数，也就是我们下面定义的res形参
            success:function (res) {
                console.log('success>>>>',res);

                {#alert('登录成功！！！！恭喜恭喜！！！');#}
                location.href = '/home/'  //访问home路径，使用的浏览器的机制


                //if (res === 'okk'){
                //    alert('登录成功！！！！恭喜恭喜！！！');

                //}else {
                //    $('.error').text('用户名或者密码有误！！！');
                //}

            },
            // 当状态码为4xx(请求错误),5xx(服务端错误)等时，那么ajax会加工响应数据并传递给error对应的函数
            error:function (error) {
                console.log('error>>>>',error);
                if (error.status === 400){
                    alert('用户名或者密码有误！！');
                    {#$('.error').text('用户名或者密码有误！！！');#}
                }
            }


        });


    })


</script>

</html>

视图代码

from django.shortcuts import render, redirect, HttpResponse

# Create your views here.

def login(request):

    if request.method == 'GET':

        # return render(request, 'login.html')
        ret = render(request, 'login.html')
        # 修改响应状态码
        # ret.status_code = 202
        #
        return ret
    else:
        print(request.POST)
        username = request.POST.get('username')
        password = request.POST.get('password')
        if username == 'root' and password == '123':
            return render(request, 'home.html')
        return redirect('/login/')  # 默认使用的状态码就是302



def ajax_login(request):

    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        print('ajax>>>>>', request.POST)
        # ajax>>>>> <QueryDict: {'username': ['xxx'], 'password': ['ooo']}>
        username = request.POST.get('username')
        password = request.POST.get('password')
        if username == 'root' and password == '123':
            # HttpResponse默认状态码为200
            return HttpResponse('okk')
            # return render(request, 'home.html')
        # return redirect('/login/')
        else:
            ret = HttpResponse('not ok')
            ret.status_code = 400
            return ret



def home(request):
    return render(request, 'home.html')

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.login),
    url(r'^ajax_login/', views.ajax_login),
    url(r'^home/', views.home),
]

 

posted @ 2021-12-02 18:33  urls  阅读(201)  评论(0)    收藏  举报