Django——Ajax

Posted 延小梁的笔记本

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django——Ajax相关的知识,希望对你有一定的参考价值。

1.Ajax概述

对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(html),浏览器将字符串(HTML)渲染并显示浏览器上。

对比

1、传统的Web应用

一个简单操作需要重新加载全局数据

2、Ajax

  AJAX,Asynchronous javascript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。

异步的JavaScript:

  使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】

  PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。

XML:

 

  X

M

L是一种标记语言,是Ajax在和后台交互时传输数据的格式之一

Ajax的特点:

  1. 异步交互
  2. 浏览器页面局部刷新

Ajax的优点:

  1. Ajax使用Javascirpt向服务器发送异步请求
  2. Ajax无须刷新整个页面

同步交互与异步交互

同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;

异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

Ajax可以做:

  1. 注册时,输入用户名自动检测用户是否已经存在。
  2. 登陆时,提示用户名密码错误
  3. 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。(博客园)

2.基于jQuery的Ajax实现

jQuery.ajax(...)

                部分参数:

                        url:请求地址
                       type:请求方式,GET、POST(1.9.0之后用method)
                    headers:请求头
                       data:要发送的数据
                contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
                      async:是否异步
                    timeout:设置请求超时时间(毫秒)

                 beforeSend:发送请求前执行的函数(全局)
                   complete:完成之后执行的回调函数(全局)
                    success:成功之后执行的回调函数(全局)
                      error:失败之后执行的回调函数(全局)
                

                    accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
                   dataType:将服务器端返回的数据转换成指定类型
                                   "xml": 将服务器端返回的内容转换成xml格式
                                  "text": 将服务器端返回的内容转换成普通文本格式
                                  "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
                                "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
                                  "json": 将服务器端返回的内容转换成相应的JavaScript对象
                                 "jsonp": JSONP 格式
                                          使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数

 

下面是一个基于jQueryAjax实现登录的demo

模板:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>

<form id="form_login">
<input type="text" name="user" />
<input type="password" name="pwd" />
<span class="msg"></span>
<input type="button" class="btn-primary" value="提交">
</form>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
    $(".btn-primary").click(function(){
        $.ajax({
            url: "/login/",
            method: "post",
            data: $("#form_login").serialize(),
            dataType: "json",
            headers:{"X-CSRFtoken": $.cookie("csrftoken")},
            success: function(data){
                if(data.status){
                    location.href="http://www.baidu.com"
                }else{
                $(".msg").html(data.msg).css({"color":"red"})
                }
            }
        })
    })
</script>            

 

视图:

from django.http import JsonResponse

def login(request):
    data = {"status":True, "msg": ‘‘}
    if request.method == "POST":
        user = request.POST.get(user)
        pwd = request.POST.get(pwd)
        if user == "root":
            if pwd == "mima":
                return JsonResponse(data)
            else:
                data["status"] = False
                data["msg"] = "密码错误"
        else:
            data["status"] = False
            data["msg"] = "用户名错误"
    return JsonResponse(data)

 

以上是关于Django——Ajax的主要内容,如果未能解决你的问题,请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE的解决办法(转)(代码片段

django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE的解决办法(转)(代码片段

Django + ajax(jquery):http错误代码403(禁止)[关闭]

Javascript代码片段在drupal中不起作用

Django:AJAX + CSRF POST 给出 403