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),
]