Django框架中使用Ajax验证用户信息是否符合规范 jQuery中ajax的基本使用

鳄鱼君

发表文章数:531

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » Python教程 » Django框架中使用Ajax验证用户信息是否符合规范 jQuery中ajax的基本使用

这篇文章来介绍一下如何使用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

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《Django框架中使用Ajax验证用户信息是否符合规范 jQuery中ajax的基本使用》 发布于2020-04-20

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

6 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册