首页
所有分类
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作的文本留言本的例子(一)
Oct 09 PHP
简单的php 验证图片生成函数
May 21 PHP
php strlen mb_strlen计算中英文混排字符串长度
Jul 10 PHP
php 变量未定义等错误的解决方法
Jan 12 PHP
PHP中设置时区方法小结
Jun 03 PHP
php中使用redis队列操作实例代码
Feb 07 PHP
php 检查电子邮件函数(自写)
Jan 16 PHP
php给每个段落添加空格的方法
Mar 20 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
May 30 PHP
PHP设计模式之工厂模式与单例模式
Sep 28 PHP
ThinkPHP框架实现数据增删改
May 07 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
Mar 30 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
click(1) Set接口(1) Yolov5(1) 自定义组件(1) 本地化存储(1) Storage(1) HashSet集合(1) Vue(10) KVM(1) Jmerte(1)
You might like
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
JS简单计算器实例
2015/01/20 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
Angular实现form自动布局
2016/01/28 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
史上最全JavaScript数组去重的十种方法（推荐）
2017/08/17 Javascript
vue实现分页组件
2020/06/16 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
python实现简单socket通信的方法
2016/04/19 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Python列表解析操作实例总结
2020/02/26 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
python设置表格边框的具体方法
2020/07/17 Python
python中类与对象之间的关系详解
2020/12/16 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
Bootstrap 学习分享
2012/11/12 HTML / CSS
优衣库台湾官网：UNIQLO台湾
2019/02/01 全球购物
高中生毕业自我鉴定范文
2013/12/22 职场文书
个人担保书格式范文
2014/05/12 职场文书
外联部演讲稿
2014/05/24 职场文书