您现在的位置是：网站首页> 编程资料编程资料

django中的ajax组件教程详解_php实例_

2023-05-25 335人已围观

简介 django中的ajax组件教程详解_php实例_

Ajax(Asynchronous Javascript And XML)翻译成英文就是“异步Javascript和XML”。即用Javascript语言与服务器进行异步交互，传输的数据为XML，（现在使用更多的是json数据）。

向服务器发送请求的途径

1.浏览器地址栏 http://www.baidu.com 默认是get请求
2.form表单发送请求：
GET请求
POST请求
3.a标签 href属性默认是get请求
4.ajax()

Ajax的特点

异步交互：客户端发送一个请求后，无需等待服务器响应结束，就可以发送第二个请求；

局部刷新：浏览器页面局部刷新

局部刷新的意思就是当咱们在博客园注册一个新的博客的时候，当咱们输入用户名后鼠标移开的时候，就发送了一个请求，去验证这个用户是否存在，如果存在，则通知用户该用户名已经被注册了。

基于jquery实现的ajax请求

让我们使用pycharm重新创建一个项目，项目名为Ajax_demo，应用名为app01。

 # url控制器 from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('test_ajax/', views.test_ajax), ]

那么当我们需要有对应的视图函数 index和test_ajax：

 # app01-->views.py from django.shortcuts import render,HttpResponse # Create your views here. def index(request): return render(request, 'index.html') def test_ajax(request): return HttpResponse('hello!world!')

在这里匹配了相应的视图然后返回了一个html页面：

# index.html Title

功能1：发送ajax请求

//这里的内容是空的

这句话的意思是，当咱们点击button按钮的时候，触发了点击动作，然后发送了一个ajax请求，让我们先看看此时是什么样子的：

当我们点击了按钮的时候，就发送了一个ajax请求：

此时一个简单的ajax请求就发送完成了。

利用ajax实现计算器

首先咱们的index.html中进行布局：

 # index.html 功能2：利用ajax实现的计算器
+= $('.cal').click(function(){ $.ajax({ url:'/cal/', type:'post', data:{ 'n1':$('.num1').val(), 'n2':$('.num2').val(), }, success:function(data){ console.log(data); $('#sum').val(data); } }) })

然后咱们拿到了n1和n2的值，通过请求url发送给相应的视图然后进行数据处理，最后拿到结果再返回给这个ajax。

 # views.py def cal(request): print(request.POST) n1 = int(request.POST.get('n1')) n2 = int(request.POST.get('n2')) sum = n1+n2 return HttpResponse(sum)

此时的url控制器需要新添加一条：

path('cal/', views.cal),

其次是配置文件settings中的这一行需要注释掉：

 # 'django.middleware.csrf.CsrfViewMiddleware',

此时再查看结果：

利用ajax实现登陆认证

首先咱们要开一个路由，当用户在浏览器输入http://127.0.0.1/login_btn/的时候，就匹配导对应的视图，所以：

 # url控制器 from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('test_ajax/', views.test_ajax), path('cal/', views.cal), path('login/', views.login), path('login_btn/', views.login_btn), ] # login_btn函数 def login_btn(request): return render(request, 'login_btn.html')

然后返回了这个html页面：

Title利用ajax实现登陆认证
 用户名  密码

最后ajax将请求提交到了/login/中，然后进行匹配视图，然后就开始执行对应代码：

 def login(request): # print(request.POST) user = request.POST.get('user') pwd = request.POST.get('pwd') from .models import User user = User.objects.filter(user=user, pwd=pwd).first() ret = { 'user': None, 'msg': None } if user: ret['user'] = user.user else: ret['msg'] = 'username or password is wrong!' import json return HttpResponse(json.dumps(ret))

首先打开浏览器，输入错误的用户名和密码：

然后开始输入正确的用户名和密码，就会直接跳转到百度的首页了。

利用form表单进行文件上传

 # urls.py path('file_put/', views.file_put), # views.py # 文件的上传 def file_put(request): if request.method == 'POST': print(request.POST) return render(request, 'file_put.html') # file_put.html 文件上传基于form表单实现的文件上传
 用户名  头像

此时咱们输入完用户名和选中完图片后，点击提交咱们查看下打印的信息。

那么是我们的图片没有上传过来吗？当然不是的，是因为上传的图片就不在这里面。让我们在views.py中执行这个代码：

print(request.FILES)

看到的是这个样子：

那么此时我们就可以确定，这个文件是上传过来了，存放在request.FILES中，那么咱们使用request.FILES.get就可以把这个图片对象拿到了。

 # views.py def file_put(request): if request.method == 'POST': print(request.POST) # # print(request.body) print(request.FILES) # 图片信息 # 将文件给取出来 img_obj = request.FILES.get('avatar') with open(img_obj.name, 'wb') as f: for line in img_obj: f.write(line) return HttpResponse('ok!') return render(request, 'file_put.html')

那么此时直接上传的话，那么就会在当前项目下展示这张照片。

利用ajax实现文件上传

首先我们需要新开一个url或者将之前的注释掉：

 # urls.py path('file_put/', views.file_put),

ajax提交文件的方式同样使用form表单，但

上一篇：Laravel关联模型中过滤结果为空的结果集(has和with区别)_php实例_

下一篇：php5.x禁用eval的操作方法_php实例_

您现在的位置是：网站首页> 编程资料编程资料

django中的ajax组件教程详解_php实例_

功能1：发送ajax请求

功能2：利用ajax实现的计算器

利用ajax实现登陆认证

基于form表单实现的文件上传

相关内容

点击排行

本栏推荐

猜你喜欢