ajax异步加载

AJAX异步加载

异步加载例子，注释描述

定义

局部刷新技术，不需要整个网页刷新。
AJAX是一种异步的客户端和服务端进行交换数据的方法，表现是不重新加载页面的情况下，后台与服务器进行了数据交互，再部分的更新页面。

jQuery框架ajax使用

html

<!DOCTYPE html>  
{% load static %}  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>登录</title>  
</head>  
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">  
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
<script src="{% static 'js/login.js' %}"></script>  
<body>  
  <div class="container">  
    <h2>登录</h2>  
    <form method="post" id="login-form">  
        {% csrf_token %}  
      <label for="username">用户名:</label>  
      <input type="text" id="username" name="username" >  
  
      <label for="password">密码:</label>  
      <input type="password" id="password" name="password" >  
  
      <input type="submit" value="登录">  
    </form>  </div>  
</body>  
</html>

Django的templates格式文件。

js

$(document).ready(function() {  
    $("#login-form").submit(function(event) {  
        event.preventDefault();   //阻止事件继续进行，防止浏览器执行事件的默认操作。  
  
        var username = $("#username").val();  
        var password = $("#password").val();  
  
        $.ajax({  
            url: '../login_post_view',  // 替换为你的登录视图的URL  
            type: 'POST',  
            data: {  
                'username': username,  
                'password': password  
            },  
            success: function(data) {  
                var message = data.Success;     //从视图返回的json数据  
                if (username == "" || password == ""){  
                    alert("用户名密码不能为空");  
                }else{  
                    if (message == "0") {  
                        alert("用户名密码错误");  
                    } else {  
                        alert("登录成功");  
                        window.location.href = "../index_view";  
                    }  
                }  
  
            },  
            error: function(xhr, status, error) {  
                // 处理Ajax请求错误  
                console.log("AJAX请求出错：");  
                console.log("状态码：" + xhr.status);  
                console.log("状态消息：" + xhr.statusText);  
                console.log("错误信息：" + error);  
            }  
        });  
    });  
});

后台数据（Django为例）

def login_post_view(request):  
    message = {"Success": ""}  
    username = request.POST.get("username")  
    password = request.POST.get("password")  
    # 验证用户名密码正确  
    try:  
        my_user = MyUser.objects.get(username=username, password=password)  # 单个记录  
        message["Success"] = "1"  
        request.session["user_name"] = username  
    except MyUser.DoesNotExist:  
        message["Success"] = "0"  
    return JsonResponse(message)

返回json数据。前端接受Success的值

posted on 2024-10-15 16:07  ZanderChan  阅读(16)  评论(0)    收藏  举报

导航