博客

Ajax请求的几个小练习

准备工作

路由中做了分发：

re_path('^app01/',include('app01.url'))

app01中url.py文件的内容：

from django.urls import re_path
from app01 import views

urlpatterns = [
    re_path('^index/$',views.index),
    re_path('^test_ajax/$',views.test_ajax),
    re_path('^cal/$',views.cal),
    re_path('^login/$',views.login),
]

视图函数中第一条进入首页的函数

def index(request):
    return render(request,'index.html')

models.py文件中新增一张数据表

user

:

class User(models.Model):
    name = models.CharField(max_length=32)
    pwd = models.CharField(max_lenngth=32)

几个请求的小练习

以下只写app01应用的views与templates的模板文件的js代码——static文件的引入略去——大家注意写js前

一定要先引入jQuery


点击按钮令下面的标签出现后台传送的文字

标签如下：

<button class='AJAX'>AJAX</button>
<p class='content'></p>

js内容如下：

   $('.AJAX').click(function{
        //发送ajax请求
        $.ajax({
            //请求的url，需要增加路由
            //做了分发，路径要相应改一下
            url:'app01/test_ajax',
            type:'post',
            data:{a:1,b:2},
            success:function(data){
                console.log(data)
                //局部刷新
                $('.content').html(data)
            }
        })
   })

视图函数内容如下：

def test_ajax(request):
    print(request.GET) #<QueryDict: {'a': ['1'], 'b': ['2']}>
    return HttpResponse('OK!')

Ajax计算求和练习

标签如下：

<input id='n1' type='text'> + <input id='n2' type='text'> = <input id='n3' type='text'>
<input type='button' id='cal' value='计算'>

js内容如下：

  $('#cal').click(function(){
        
        $.ajax({
            //计算的url，需要增加路由
            //做了分发，路径要相应改一下
            url:'/app01/cal/',
            type:'post',
            data:{
                'n1':$('#n1').val(),
                'n2':$('#n2').val()
                },
            //注意这里得加形参data，接收视图函数传过来的值
            success:function(data){
                //结果赋值
                console.log(data)
                $('#n3').val(data)
            }
        })
    })

视图函数内容如下：

def cal(request):
    print(request.POST)    #<QueryDict: {'n1': ['1232'], 'n2': ['123']}>
    n1 = int(request.POST.get('n1'))
    n2 = int(request.POST.get('n2'))
    ret = n1 + n2
    return HttpRequest(ret)

Ajax登陆验证

标签如下：

<form action=''> 
    用户名： <input id='user' type='text'>
    密  码： <input id='pwd' type='text'>
    <input id='login_btn' type='button' value='确认'>
    <span id='error'></span>        
</form>

js内容如下：

  $('#login_btn').click(function{
        $.ajax({
            //增加路由，注意分发的写法
            url:'/app01/login/',
            type:'post',
            data:{
                'user':$('#user').val(),
                'pwd':$('#pwd').val()
            },
            success:function(data){
                console.log(data)           //得到的是json字符串 {"user": null, "msg": "wrong username or password"}
                console.log(typeof data)    //string类型
                //反序列化
                var dt = JSON.parse(data)   //得到的是 object{}
                console.log(dt)             //{"user": null, "msg": "wrong username or password"}
                console.log(typeof dt)      //object
                //注意下面对象调用了dt
                if(dt.user){
                    location.href='http://www.baidu.com'
                    }
                else{
                    $('#error').html(dt.msg).css({'color':'red','margin-left':'10px'})
                    }
            },      
        })
    })

视图函数内容如下：

def login(request):
    print(request.POST)   #<QueryDict: {'user': ['123'], 'pwd': ['222']}>
    username = request.POST.get('user')
    password = request.POST.get('pwd')
    #返回的信息
    ret = {'user':None,'msg':None}
    ##从数据库中找值去判断————注意数据库中的字段是name与pwd，还有这里要用first()
    user = User.objects.filter(name=username,pwd=password).first()
    if user:
        ret['user'] = user.name
    else:
        ret['pwd'] = 'wrong username or password'   
    #给前端返回序列化后的数据
    import json
    return HttpRequest(json.dumps(ret))

效果演示：