django中的ajax组件教程详解

 更新时间£º2018年10月18日 12:02:26   作者£º肖亚飞   我要评论

Ajax(Asynchronous Javascript And XML)翻译成英文就是¡°异步Javascript和XML¡±¡£这篇文章主要介绍了django中的ajax组件的教程 ,需要的朋友可以参考下

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
<!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请求£¬让我们先看?#21019;?#26102;是什么样子的£º

当我们点击了按钮的时候£¬就发送了一个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',

此时再查看结果£º

利用ajax实现登陆?#29616;?/strong>

首先咱们要开一个路由£¬当用户在浏览器输入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实现登陆?#29616;?lt;/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))

首先打开浏览器£¬输入错误的用户名和密码£º

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

利用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>

此时咱们输入完用户名和选中完?#35745;?#21518;£¬点击提交咱们查看下打印的信息¡£

那么是我们的?#35745;?#27809;有上传过来吗£¿当然不是的£¬是因为上传的?#35745;?#23601;不在这里面¡£让我们在views.py中执行这个代码£º

print(request.FILES)

看到的是这个样子£º

那?#21019;?#26102;我们就可以确定£¬这个文件是上传过来了£¬存放在request.FILES中£¬那么咱们使用request.FILES.get就可以把这个?#35745;?#23545;象拿到了¡£

# views.py
 def file_put(request):
  if request.method == 'POST':
    print(request.POST) #
    # print(request.body)
    print(request.FILES) # ?#35745;?#20449;息
    # 将文件给取出来
    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')

那?#21019;?#26102;直?#30001;?#20256;的话£¬那么就会在当前项目下展示这张照片¡£

利用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......

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

让我们?#30452;?#30475;下这几个请求头£º

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的时候£¬让我们来看下打印的结果是什么£º


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


让我们现在发送一个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')

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

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

总结

以上所述是小编给大家介绍的django中的ajax组件教程详解£¬希望?#28304;?#23478;有所帮助£¬如果大家有任?#25105;ÉÎ是?#32473;我留言£¬小编会及时回?#21019;?#23478;的¡£在此也非常?#34892;?#22823;家对脚本之家网站的支持£¡

相关文章

  • ThinkPHP在新浪SAE?#25945;?#30340;部署实例

    ThinkPHP在新浪SAE?#25945;?#30340;部署实例

    这篇文章主要介绍了ThinkPHP在新浪SAE?#25945;?#30340;部署的实现方法,以实例的形式详细讲述了WBlog的完整部署过程,需要的朋友可以参考下
    2014-10-10
  • 一个用php实现的获取URL信息的类

    一个用php实现的获取URL信息的类

    一个用php实现的获取URL信息的类...
    2007-01-01
  • Laravel中使用自己编写类库的3?#22336;?#27861;

    Laravel中使用自己编写类库的3?#22336;?#27861;

    这篇文章主要介绍了Laravel中使用自己编写类库的3?#22336;?#27861;,本文讲解了增加可直接实例化的类¡¢增加可直接调用的函数¡¢增加稍微复杂的类库三?#22336;?#24335;,需要的朋友可以参考下
    2015-02-02
  • Zend Framework动作助手Redirector用法实例详解

    Zend Framework动作助手Redirector用法实例详解

    这篇文章主要介绍了Zend Framework动作助手Redirector用法,结合实例形式详细分析了转向器Redirector的功能,使用方法与相关注意事项,需要的朋友可以参考下
    2016-03-03
  • php高清晰度无损?#35745;?#21387;缩功能的实现代码

    php高清晰度无损?#35745;?#21387;缩功能的实现代码

    ¡¡经常会用到把上传的大?#35745;?#21387;缩£¬特别是体积£¬在微信等APP应用上£¬也默认都是有压缩的£¬那么£¬怎么样对?#35745;?#22823;幅度压缩却仍能保持?#32454;?#30340;清晰度呢£¿接下来通过本文给大家分享php高清晰度无损?#35745;?#21387;缩功能,?#34892;?#36259;的朋友一起看看吧
    2018-12-12
  • PHP中in_array的隐式转换的解决方法

    PHP中in_array的隐式转换的解决方法

    本篇文章主要介绍了PHP中in_array的隐式转换的解决方法£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
    2018-03-03
  • thinkphp实现发送邮件密码?#19968;?#21151;能实例

    thinkphp实现发送邮件密码?#19968;?#21151;能实例

    这篇文章主要介绍了thinkphp实现发送邮件密码?#19968;?#21151;能的方法,以实例形式详细讲述了配置文件与功能代码的实现方法,是非常实用的技巧,需要的朋友可以参考下
    2014-12-12
  • 详谈php静态方法及普通方法的区别

    详谈php静态方法及普通方法的区别

    下面小编就为大家带来一篇详谈php静态方法及普通方法的区别¡£小编觉得挺不错的£¬现在就分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
    2016-10-10
  • 深入浅析用PHP实现MVC

    深入浅析用PHP实现MVC

    在PHP中使用MVC越来越流行了£¬特别是在一些开源的框架当中¡£接下来通过本文给大家介绍PHP实现MVC的相关知识£¬?#34892;?#36259;的朋友一起学习吧
    2016-03-03
  • PHP获取input输入框中的?#31561;?#25968;据库比较显示出来

    PHP获取input输入框中的?#31561;?#25968;据库比较显示出来

    这篇文章主要介绍了PHP获取input输入框中的?#31561;?#25968;据库比较显示出来的相关资料,前端还算比较简单£¬php后台接受并查询£¬本文给大家介绍的非常详细£¬具有参考借鉴价值£¬需要的朋友可以参考下
    2016-11-11

最新评论

ÁÉÄþ35Ñ¡7¿ª½±½á¹û