• Ajax请求的几个小练习


    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))
    

    效果演示:

  • 相关阅读:
    [js]vue-router的使用
    [js]递归实现 数组转树形
    [js]vue组件核心
    [js]了解chart绘图
    [js]vue权限控制
    [js]vue显示一个外部链接的组件
    [js]axios使用
    [js]vue中 给router-view 组件的 绑定 key 的原因
    [java]BeanPostProcessor使用及源码
    [java]权限管理
  • 原文地址:https://www.cnblogs.com/paulwhw/p/9447479.html
Copyright © 2020-2023  润新知