Ajax 小记

最新推荐文章于 2024-03-05 23:02:03 发布

cwtnice

最新推荐文章于 2024-03-05 23:02:03 发布

阅读量130

点赞数

分类专栏： # Django 文章标签： ajax web

本文链接：https://blog.csdn.net/cwtnice/article/details/117295238

版权

Django 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

Ajax是什么？

AJAX（Asynchronous Javascript And XML）中文意思就是“异步的Javascript和XML”。即使用Javascript与
服务器进行异步交互，传输的数据为XML（现在多用json数据）

使用Ajax的优点：

异步请求：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求
局部刷新：不用刷新整个界面，可以局部更新数据，用户体验感更好

常见的请求：

http请求，类型有 get 和post，参数是url
form表单请求，类型有 get 和post，参数是url
a标签，get请求，参数是url

这些请求都是同步交互，也就是客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

而且，例如from表单提交到后台进行查找时候，request的方式会让整个页面刷新，下拉框和搜索框会还原成原来的样子（当然可以获取提交的内容然后用js的方式在加载模板时候赋值回去，这就很繁琐了）。

当url发生变化时，页面会发生跳转（此时整个页面刷新），这样请求次数多了，用户的体验感会很差。

这种时候就需要用到Ajax了。

还有什么地方应用到了Ajax呢？

在注册的时候，比如输入用户名，现在的网站就会自动和数据库种进行交互，然后在页面中显示用户名可用或者该用户名已被使用。网页局部刷新，用户感受不到的情况下就完成了一次请求。

使用Ajax的简单DEMO:(后端用的Django)
这里使用jquery的Ajax，更好用

index.html:

<!DOCTYPE html>
<html lang="en">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button class="btn">ajax测试</button>
    <br>
    <input class="in1" type="text">
</body>

<script type="text/javascript">
    $('.btn').click(function (){
        $.ajax({
            url : '/ajax/',
            type : 'GET',
            success : function(data){
                $('.in1').val(data)
            }
        })
    });
</script>

</html>

views.py

from django.shortcuts import render, HttpResponse

def ajax(request):
    return HttpResponse('hello ajax!')

Ajax发送请求给后端（服务端），后端根据路由调用对应的视图函数（定义在views.py中）来处理并返回值给Ajax，Ajax中的success就是请求成功后的回调函数，这里的data就是返回值

试试看效果：

点击前：
在这里插入图片描述
点击之后：

Ajax的应用：验证登录

首先先看看不用ajax，用form表单提交是什么样的：

form表单提交：

index.html

 <form action="/login/" method="post">
     用户名:<input type="text" name="user">
     密码：<input type="text" name="pwd">
     <input type="submit" value="确认">
 </form>

views.py

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

def login(request):
    if request.method == 'POST':
    	# 以urlencode编码的格式会放在body里
        print(request.body) 
        # Django自动把数据转成json，放在POST里
        print(request.POST)
    return render(request, 'index.html')

很简单的表单提交，输入之后按提交，用F12来检查：
在这里插入图片描述
编码类型可以在from标签中指定：

enctype="application/x-www-form-urlencoded" 默认
enctype="multipart/form-data"传送文件的时候用到

而刚才输入的内容可以从From Data中找到：
数据会以user=abc&pwd=123的形式传到后端

在这里插入图片描述
看一下pycharm的控制台输出：

使用urlencode的编码方式，前端会把需要传递的键值对，组装成参数名1=实际值1&参数名2=实际值2……的形式发送给后端，后端会先把传入的参数都放入body。

而Django为了方便取值，做了类似反序列化的处理，转成了json字串，存入了POST里面。

Ajax提交：

login.html

<body>
	<div>
	    {% csrf_token %}
	    用户名：<input type="text" id="username"><br/>
	    密码：<input type="password" id="password"><br/>
	    <input type="button" value="登录" id="btn"><br/>
	    <div id="error_msg"></div>
	</div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                username = $('#username').val();
                password = $('#password').val();

                $.post('/login_check/', {
                    'username': username,
                    'password': password,
                }, function (data) {
                    //获取返回的数据并进行操作
                    if (data.res === 1) {
                        //登录成功
                        location.href = '/index/' //跳转到成功页面
                    } else  {
                        $('#error_msg').show().text('用户名或密码错误！')
                    }
                })
            });
        });
    </script>

views.py:

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

def login_check(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    print(username)

    # 返回格式为json 成功res为1，失败为0
    if username == 'abc' and password == '123':
        return JsonResponse({'res': 1})
    else:
        #return redirect('/login')
        return JsonResponse({'res': 0})
    
def index(request):
    return render(request, 'index.html')

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),

    path('', views.login),  
    path('login_check/', views.login_check), 
    path('index/', views.index)
]