这篇文章来介绍一下如何使用jquery的ajax来对用户提交的信息做验证,检查是否符合格式。那么前面的内容我就不再提了,还是接着往下学习。我们先来看一下使用ajax的GET方式,测试一下后台是否可以拿到数据,并打印出来。现在login.html模板中随便定义一个标签,使用ajax绑定一个点击事件:

 <a id="ajax_botton">提交</a>   //login.html模板

<script type="text/javascript" src="/static/jquery.min.js"></script>
<script>
    $('#ajax_botton').click(function () {
        $.ajax({    //jquery提供的ajax功能
            url:"/text_ajax",     //提交到哪   
            type:"GET",            //什么方式提交  
            data:{'k1':"Hello World!","k2":"Welcome to www.e1yu.com"},    //向服务器提交的数据
            success:function (data) {       //服务器返回的数据存在于data参数中
                alert(data)
            }
        })
    })
</script>

配置好路由规则(text_ajax),在视图函数中添加对应的函数:


from django.shortcuts import HttpResponse
def login(request):
    return render(request,'login.html')

def ajax(reqeust):
    print(reqeust.method,reqeust.GET.get('k1'))
    return HttpResponse('OK')

然后运行django程序测试一下,点击按钮就会在浏览器中看到服务器返回的OK,这里有几点需要注意的地方在login.html模板中引入js或者css的话,需要配置静态目录,否则对应的静态文件会出现404,这百分之百就是没有配置静态目录,或者是配置错误,如果配置参考:Django配置静态目录

理清数据来回传递的过程,我们在login.html模板中传递的是data:{‘k1’:”Hello World!”,”k2″:”Welcome to www.e1yu.com”},在服务器的后台可以根据请求的方式来获取对应的键值,然后success:function (data)这个函数会等待服务器返回数据,那么我们就在服务器端使用return HttpResponse(‘OK’),返回一个字符串OK让函数接收,成功就会在浏览器中出现OK弹框!

知道了数据传递的过程之后,一切就变得简单了,我们在使用POST请求做一下测试!POST用于表单验证的,我们使用上面的方法,获取用户提交的内容,传递到服务器后台,服务器在后台进行判断并且给出提示在返回给用户,好了我们来实现一下:

<form class="loginform" action="/login/" method="post">   
    //URL规则path('login/', views.login)
    <input id="user" name="user"  type="text" placeholder="账号">
    <input id="pwd" name="pwd" type="password" placeholder="密码">
    <input id="login-botton"type="submit" value="登录"/>
</from>    //login.html

<script type="text/javascript" src="/static/jquery.min.js"></script>
<script>
$(function () {
    $('#login-botton').click(function () {
        $.ajax({
            url:"/text_ajax/",
            type:"POST",
            data:{ "user": $('#user').val(), "pwd": $('#pwd').val() }, //获取id为user和pwd的值传到后台
            success:function (data) {
                alert(data);
            }
        })
    })
 })
</script>

鳄鱼君在测试的时候遇到了:RuntimeError: You called this URL via POST, but the URL doesn’t end in a slash and you have APPEND_SLASH set. Django can’t redirect to the slash URL while maintaining POST data. Change your form to point to 127.0.0.1:8000/text_ajax/ (note the trailing slash), or set APPEND_SLASH=False in your Django settings.的错误,那么这就是/的问题,解决方法很多,你需要自己选择,首先保证你的路由规则如果是path('text_ajax/', views.ajax),这样的话,ajax中的就因该是url:"/text_ajax/",这样,反之‘text_ajax’对应url:”/text_ajax

发表评论

后才能评论