Django—Ajax请求【get，post】

最新推荐文章于 2022-07-05 15:42:14 发布

老酱儿

最新推荐文章于 2022-07-05 15:42:14 发布

阅读量520

点赞数

本文链接：https://blog.csdn.net/ybw_2569/article/details/96323315

版权

Django—Ajax请求【get，post】

初步介绍

Ajax 介绍：AsynchronousJavascript and XML【异步的JavaScript和xml】。

普通请求，会携带整个页面提交，最明显的特征是刷新页面，并且请求可能阻塞整个服务。这样导致：①请求内容和响应内容冗余，②用户体验特别差。

基于以上的问题，后来出现了ajax请求。

1、ajax可以发起局部请求，页面整体可以不刷新，只是页面的局部刷新。

2、Ajax可以发起异步请求，请求的过程当中不会阻塞web正常操作和访问。

Ajax的兴起得益于Google公司的推广，Google公司在本公司大量的项目当中使用了ajax。这件事儿让微软公司感觉很尴尬，在1997年，微软公司就发明了ajax核心技术，1999年微软的ie5浏览器就开始兼容ajax对象(xmlhttpRequest),微软公司在后来就将ajax技术搁置了。

Ajax需要js语法进行编写，原生js的ajax比较复杂，因为各种浏览器对ajax对象的兼容是不一样的，使用js写ajax，首先要完成的是各种浏览器的ajax实例创建。比较繁复，所有我们通常用jq封装过的ajax。

Ajax get请求：需要一个页面，但是需要两个视图。

第一个视图只是负责生产ajax请求的页面：

第二个视图是为了处理ajax请求的视图，通常返回json，不返回页面

get

第一个视图

def ajax_get(request):
    return render_to_response('ajax_get.html')

第二个视图

from django.http import JsonResponse
def ajax_get_data(request):
    result = {"status":"error","content":""} # 初始化一个返回结果的格式
    username = request.GET.get('username') # 获取Ajax，get请求过来的username
    if username:# 用户名不为空
        user = FromExample.objects.filter(name=username).first() # 进行数据库查询
        if user: # 如果有结果，证明用户名被使用
            result['content'] = '用户名重复'
        else: # 证明用户名没有被使用
            result['status'] = "success"
            result['content'] = '用户名可以使用'
    else: # 如果用户名为空
        result['content'] = '用户名不可以为空'
    return JsonResponse(result)

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>
    <input id="username" type="text">
    <button id="valid" type="button">校验</button>
    <span id="ts" style="color: red"></span>
    <script>
        $('#valid').click(
           function () {
                var username = $('#username').val(); //获取输入的用户名
                var url = '/agd/?username='+username; //拼接url
                $.ajax( //发起Ajax请求，是jq.Ajax的固定格式
                    { // Ajax配置项必须在一个对象（字典）当中
                        url: url, // 请求的路由
                        type: "get", // 请求的类型
                        data:"", // 请求携带的参数
                        success:function (data) { // 请求成功的数据
                            var content = data.content;
                            $('#ts').text(content)
                        },
                        error: function (error) { // 请求失败的数据
                            console.log(error)
                        }
                    }
                )
            }
        )
    </script>
</body>
</html>

post

第一个视图

def ajax_post(request):
    userForm = UserForm()
    return render(request,'ajax_post.html',locals())

第二个视图

from django.http import JsonResponse
def ajax_post_data(request):
    result = {'status':'error','content':'请求过来了'}
    if request.method == 'POST':
        data = UserForm(request.POST) #将post请求的数据传递给UserForm进行校验
        if data.is_valid(): #如果校验成功，返回true
            clean_data = data.cleaned_data #返回一个放着校验过的数据的字典
            user = UserModel()
            user.username = clean_data.get('username')
            user.password = clean_data.get('password')
            user.age = clean_data.get('age')
            user.email = clean_data.get('email')
            user.birthday = clean_data.get('birthday')
            user.save()
            result['status'] = 'success'
            result['content'] = '数据库保存成功'
        else:
            result['content'] = '<br>'.join(data.errors.values) # 连接字符串
    else:
        result['content'] = '请求类型错误'
    return JsonResponse(result)

页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
        }
        *{
            font-size: 32px;
        }
        .errorlist{
            color: red;
            font-size: 24px;
        }
    </style>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>
    <form class="register_form">
        {% csrf_token %}
        {% for u in userForm %}
        <p>
            <label>{{ u.label }}</label>
            {{ u }}
        </p>
        {% endfor %}
        <p>
            <input id="submit" type="button" value="提交">
        </p>
    </form>

    <script>
        $("#submit").click(
            function () {
                // 收集数据
                var username = $('#id_username').val();
                var password = $('#id_password').val();
                var age = $('#id_age').val();
                var email = $('#id_email').val();
                var birthday = $('#id_birthday').val();
                var csrfmiddlewaretoken = '{{ csrf_token }}';
                // csrfmiddlewaretoken 为固定的，不可更改
                send_data = {
                    'username' : username,
                    'password' : password,
                    'age' : age,
                    'email' : email,
                    'birthday' : birthday,
                    "csrfmiddlewaretoken": csrfmiddlewaretoken,
                };
                console.log(send_data);
                var url = '/apd/';  // 编写请求的url
                $.ajax(
                    {
                        url: url,
                        type: 'POST',
                        data: send_data,
                        success: function (data) {
                            console.log(data)
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    }
                )
            }
        )
    </script>
</body>
</html>