首页
所有分类
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 相关文章推荐
php下安装配置fckeditor编辑器的方法
Mar 02 PHP
php无限分类且支持输出树状图的详细介绍
Jun 19 PHP
Zend Studio 实用快捷键一览表(精心整理)
Aug 10 PHP
PHP数据过滤的方法
Oct 30 PHP
PHP数组遍历知识汇总（包含遍历方法、数组指针操作函数、数组遍历测速）
Jul 05 PHP
Smarty中调用FCKeditor的方法
Oct 27 PHP
PHP中JSON的应用技巧
Oct 10 PHP
Zend Framework框架实现类似Google搜索分页效果
Nov 25 PHP
phpstudy默认不支持64位php的解决方法
Feb 20 PHP
PHP封装的XML简单操作类完整实例
Nov 13 PHP
PHP实现的函数重载功能示例
Aug 03 PHP
PHP cookie与session会话基本用法实例分析
Nov 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
DNA(2) 富碳陨石(1) 火星(2) RNA(2) 美国航天局(1) 大脑(1) 毅力号(1) 数据(1) 嘧啶碱基(2) 陨石(1)
You might like
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python assert的用处示例详解
2019/04/01 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
解决python对齐错误的方法
2020/07/16 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
美国豪华时尚女性精品店：Kirna Zabête
2018/01/11 全球购物
巴西宠物商店：Cobasi
2019/04/19 全球购物
巴西购物网站：Submarino
2020/01/19 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
班队活动设计方案
2014/01/30 职场文书
保险公司晨会主持词
2014/03/22 职场文书
青春无悔演讲稿
2014/05/08 职场文书
校庆口号
2014/06/20 职场文书
酒店员工手册范本
2015/05/14 职场文书
旅行社计调工作总结
2015/08/12 职场文书