首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

django中的ajax组件教程详解

Posted in PHP onOctober 18, 2018

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的特点

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

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

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

django中的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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
  <h3>功能1：发送ajax请求</h3>
  <p class="content"></p> //这里的内容是空的
  <button class="btn">ajax</button>
  <script>
    $('.btn').click(function(){
      $.ajax({
        url:'/test_ajax/',
        type:'get',
        success:function(data){
          $('.content').html(data)
        }
      })
    })
  </script>
</body>
</html>

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

django中的ajax组件教程详解

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

django中的ajax组件教程详解

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

利用ajax实现计算器

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

# index.html
<h3>功能2：利用ajax实现的计算器</h3>
  <input type="text" class="num1">+<input type="text" class="num2">=<input type="text" id="sum"><button class="cal">计算</button>
    $('.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',

此时再查看结果：

django中的ajax组件教程详解

利用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页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
  <h3>利用ajax实现登陆认证</h3>
  <form action="">
    用户名 <input type="text" class="user">
    密码 <input type="password" class="pwd">
    <input type="button" value="submit" class="login_btn">
    <span class="error"></span>
  </form>
  <script>
    $('.login_btn').click(function(){
      $.ajax({
        url:'/login/',
        type:'post',
        data:{
          'user':$('.user').val(),
          'pwd':$('.pwd').val(),
        },
        success:function(data){
          //此时需要进行转换
          console.log(typeof(data));
          var data = JSON.parse(data)
          console.log(typeof(data));
          if (data.user){
            location.href = 'http://www.baidu.com'
          }else{
            $('.error').html(data.msg).css({'color':'red'})
          }
        }
      })
    })
  </script>
</body>
</html>

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

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

django中的ajax组件教程详解

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

利用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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
</head>
<body>
  <h3>基于form表单实现的文件上传</h3>
  <form action="" method="post" enctype="multipart/form-data">
    用户名 <input type="text" name="user">
    头像 <input type="file" name="avatar">
    <input type="submit">
  </form>
</body>
</html>

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

django中的ajax组件教程详解

django中的ajax组件教程详解

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

print(request.FILES)

看到的是这个样子：

django中的ajax组件教程详解

那么此时我们就可以确定，这个文件是上传过来了，存放在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表单，但是不需要给input设置name属性，只需要设置class或者id就可以了：

# file_put.html
  <form action="" method="post">
    用户名 <input type="text" id="user">
    头像 <input type="file" id="avatar" >
    <input type="button" class="btn" value="ajax">
  </form>

那么咱们需要给btn设置点击click动作：

$('.btn').click(function(){
  
    //涉及到文件上传 需要创建formdata对象
    var formdata = new FormData();
    formdata.append('user',$('#user').val());
    formdata.append('avatar',$('#avatar')[0].files[0]);

    $.ajax({
      url:'',
      type:'post',
      contentType:false, // 交给FormData处理编码
      processData:false, //对数据是否进行预处理 如果不做预处理的话 就不做任何编码了
      data:formdata,
      success:function(data){
        console.log(data)
      }
    })
  })

最后在试图函数中进行文件保存操作：

def file_put(request):
  if request.method == "POST":
    print("body", request.body) # 请求报文中的请求体 json
    print("POST", request.POST) # if contentType==urlencoded ,request.POST才有数据
    print('FILES', request.FILES)
    file_obj=request.FILES.get("avatar")
    with open(file_obj.name,"wb") as f:
      for line in file_obj:
        f.write(line)
    return HttpResponse("OK")
  return render(request, "file_put.html")
Content-Type

在咱们刚刚的form表单的文件上传和ajax文件上传的时候，都涉及到一个请求头的东西，这个东西是什么呢？这个东西决定着服务器会按照哪种编码格式给你解码，当你默认不写的时候，此时的请求头是：application/x-www-form-urlencoded，当你想发送文件类的东西，此时的请求头应该是：form-data......

当服务器收到客户端发送过来的请求时，首先就会去查看请求头，判断你的请求头是什么，然后进行解码。

让我们分别看下这几个请求头：

x-www-form-urlencoded

application/x-www-form-urlencoded：表单数据编码为键值对，&分隔，可以当成咱们的GET请求中?后面的数据，让我们发送一个庶几乎看看：

<form action="" method="post"> 用户名 <input type="text" name="user"> 密码 <input type="password" name="pwd"> <input type="submit" value="submit"> </form>

那么我们需要一个视图函数还进行处理：

def file_put(request):
  if request.method == "POST":
    print("body", request.body) # 请求报文中的请求体 json
    print("POST", request.POST) # if contentType==urlencoded ,request.POST才有数据
    return HttpResponse("OK")
  return render(request, "file_put.html")

当我们在浏览器输入admin和123的时候，让我们来看下打印的结果是什么：

django中的ajax组件教程详解

我们刚刚说过，当我们请求头什么都不写的话，那么就是默认的x-www-form-urlencoded,当请求头是这种的话，此时我们打印request.POST是有值的，也就这一种请求方式request.POST才有值。

django中的ajax组件教程详解

让我们现在发送一个json的数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form action="" method="post">
  用户名 <input type="text" class="user">
  密码 <input type="password" class="pwd">
  <input type="button" value="submit" class="btn">
</form>
<script>
  $('.btn').click(function(){
    $.ajax({
      url:'',
      type:'post',
      data:JSON.stringify({
        a:1,
        b:2
      }),
      success:function(data){
        console.log(data)
      }
    })
  })
</script>
</body>
</html>

视图函数中是这样的：

def send_json(request):
  if request.method == 'POST':
    print('body', request.body)
    print('post', request.POST)
    print('files', request.FILES)
    return HttpResponse('ok!')
  return render(request, 'send_json.html')

当我们发送数据的时候，通过解码收到的就是这样的数据：

django中的ajax组件教程详解

就和我们刚刚说的一样，当请求头是x-www-form-urlencoded的时候，request.POST才会有数据，其他的就没有。

总结

以上所述是小编给大家介绍的django中的ajax组件教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

django中的ajax组件教程详解

- Author -

肖亚飞

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
一个多文件上传的例子(原创)
Oct 09 PHP
PHP生成静态页
Nov 25 PHP
PHP读MYSQL中文乱码的解决方法
Dec 17 PHP
PHP一些常用的正则表达式字符的一些转换
Jul 29 PHP
使用PHP curl模拟浏览器抓取网站信息
Oct 28 PHP
phpmyadmin中禁止外网使用的方法
Nov 04 PHP
php读取文件内容的方法汇总
Jan 24 PHP
php轻量级的性能分析工具xhprof的安装使用
Aug 12 PHP
详谈PHP中的密码安全性Password Hashing
Feb 04 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
Dec 18 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
May 27 PHP
YII2框架中添加自定义模块的方法实例分析
Mar 18 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
Oct 18 #PHP
PHP使用glob方法遍历文件夹下所有文件的实例
Oct 17 #PHP
php 读取文件夹下所有图片、文件的实例
Oct 17 #PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
Oct 16 #PHP
实现PHP中session存储及删除变量
Oct 15 #PHP
PHP实现用session来实现记录用户登陆信息
Oct 15 #PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
Oct 15 #PHP
Mint UI(1) exists(2) mt-swipe(1) Spring Bean(1) REST(1) Switch(1) 慢日志(1) 远程桌面(2) Spring JPA(1) cmd(1)
You might like
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
在Python中使用模块的教程
2015/04/27 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Maison Lab荷兰：名牌Outlet购物
2018/08/10 全球购物
FC-Moto瑞典：欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
荷兰最大的儿童服装店：The Kids Republic
2019/04/13 全球购物
奥地利票务门户网站：oeticket.com
2019/12/31 全球购物
俄罗斯香水和化妆品在线商店：Aroma-butik
2020/02/28 全球购物
DataList 能否分页，请问如何实现？
2015/05/03 面试题
大学同学十年聚会感言
2014/02/21 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
生产助理岗位职责
2014/06/18 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
十大动画制作软件，Adobe产品上榜两款，第一是行业标准软件
2022/03/18 杂记
MySQL学习必备条件查询数据
2022/03/25 MySQL