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

效果演示：