Django 和AJAX 交互

最新推荐文章于 2021-05-06 09:27:54 发布

转载最新推荐文章于 2021-05-06 09:27:54 发布 · 454 阅读

本文通过一个具体的示例介绍了如何使用Django后端框架与AJAX进行交互。前端部分采用HTML、CSS和JavaScript实现了一个简单的登录表单，当用户提交表单时，通过AJAX发送POST请求到Django后端；后端验证用户名和密码，并返回相应的响应。该示例展示了前端与后端之间的数据交换过程。

Django 和AJAX 交互

AJAX:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AjaxTest</title>
    <style>
        .success{
            color: green;
        }
        .error{
            color: gray;
        }
     </style>
</head>
<body>
<div>
<h1>Ajex</h1>
<p>Username:<input type="text" id="username"></p>
<p>Password:<input type="password" id ="password"></p>
<p><a onclick="tijiao1();">tijiao</a></p>
<span id="status"></span>
</div>
<script type="text/javascript" src="/static/js/jquery-2.2.4.min.js"></script>
<script>
    function tijiao1(){
        var  user =$('#username').val()
        var pwd =$('#password').val()
        $.ajax({
            url:'/ajax/',
            type:'POST',
            data:{username:user,password:pwd},
            success:function(callback){
                var callback_dict = $.parseJSON(callback);
                if (callback_dict.status==1002){
                    $('#status').text('success');
                    $('#status').removeClass('error').addClass('success');
                }else if(callback_dict.status == 1001){
                    $('#status').text(callback_dict.error);
                    $('#status').removeClass('success').addClass('error')
                }
            }
        })
    }
</script>
</body>
</html>


Django views Code

from django.shortcuts import render,HttpResponse
import  json
# Create your views here.
def ajax(request):
    if request.method =='POST':
        ret={'status':1001,'error':''}
        user=request.POST.get('username')
        pwd=request.POST.get('password')
        print (user,pwd)
        if user == 'freeman' and pwd == 'redhat':
            ret['status'] = 1002
        else:
            ret['error']='Username oR password error'
        return  HttpResponse(json.dumps(ret))
    return render(request,'ajax.html')