django之ajax

Posted 耗油炒白菜

tags:

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

Ajax初识

"""
异步提交
局部刷新
例子:github注册 动态获取用户名实时的跟后端确认并实时展示的前端(局部刷新) 朝发送请求的方式 1.浏览器地址栏直接输入url回车 GET请求 2.a标签href属性 GET请求 3.form表单 GET请求/POST请求 4.ajax GET请求/POST请求 AJAX 不是新的编程语言,而是一种使用现有标准的新方法(比较装饰器) AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程) Ajax我们只学习jQuery封装之后的版本(不学原生的 原生的复杂并且在实际项目中也一般不用) 所以我们在前端页面使用ajax的时候需要确保导入了jQuery ps:并不只有jQuery能够实现ajax,其他的框架也可以 但是换汤不换药 原理是一样的
我们学的是jQuery版本的ajax,必须要确保html页面已经提前加载了jQuery
"""

Ajax准备知识:JSON

什么是json?

  • JSON 指的是 javascript 对象表示法(JavaScript Object Notation)
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 *
  • JSON 具有自我描述性,更易理解

* JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

 啥都别多说了,上图吧!

 合格的json对象(json只认双引的字符串格式):

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ] 

stringify与parse方法

JavaScript中关于JSON对象和字符串转换的两个方法:

JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)

JSON.parse(\'{"name":"Howker"}\');

JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。

JSON.stringify({"name":"Tonny"})

Ajax简介

AJAXAsynchronous Javascript And XML)翻译成中文就是异步的JavascriptXML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

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

基本语法:

$.ajax({
    url:\'\',  # 朝后端哪个地址发送 跟action三种书写方式一致
    type:\'get/post\',  # 提交方式 默认get 跟form表单method参数一致
    data:{\'username\':\'jason\',\'password\':123},  # 要发送的数据
    success:function(args){
      # 异步回调处理机制
    } 
  })

"""
  当你在利用ajax进行前后端交互的时候
  后端无论返回什么都只会被回调函数接受 而不再影响这个浏览器页面了
"""

 # 扩展 参数  代码发布项目还会涉及
  dataType:\'json\'
  """
  当后端是以HttpResponse返回的json格式的数据
  默认是不会自动反序列化的
      1.自己手动JSON.parse()
      2.配置dataType参数
  """

补充写法

<script>
       $("#id_submit").click(function () {
        // 朝后端发送ajax请求
        $.ajax({
            // 1、指定朝哪个后端发ajax请求
            url:"",  // 不写就是朝当前地址提交
            // 2、请求方式
            type:"post",   //不指定默认就是get,都是小写,用ajax提交post数据,后端也是在request.POST中接收
            dataType:"json",
            data:{
                "username":$("#name").val(),
                "password":$("#password").val()
            },
            // 4、回调函数:当后端给你返回结果的时候会自动触发 args接收后端的返回结果
            success:function (args) {
                console.log(args)     // 通过DOM操作动态渲染到第三个input里面
            }
        })
        .done(function(resp) {     // 请求成功以后的操作
                console.log(resp);
            })
        .fail(function(error) {    // 请求失败以后的操作
            console.log(error);
        })
    })
    </script>

结论:

# 结论:写ajax的时候 你可以直接将dataType参数加上 以防万一 或者后端就用JsonResonse
  $.ajax({
    url:\'\',  # 朝后端哪个地址发送 跟action三种书写方式一致
    type:\'get/post\',  # 提交方式 默认get 跟form表单method参数一致
    dataType:\'JSON\',  
    data:{\'username\':\'jason\',\'password\':123},  # 要发送的数据
    success:function(args){
      # 异步回调处理机制
    } 
  })

小案例:

在不刷新的情况下显示计算结果到页面上,页面输入两个整数,通过AJAX传输到后端计算出结果并返回。(也不能在前端计算)

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r\'^admin/\', admin.site.urls),
    # ajax
    url(r\'^ab_ajax/\', views.ab_ajax),
]
urls.py

views.py

from django.shortcuts import render,HttpResponse,redirect

# Create your views here.
def ab_ajax(request):   # 和ajax交互的时候,无论返回什么,都不会作用于浏览器,而是交给ajax的回调函数
    if request.method == "POST":
        # print(request.POST)      # <QueryDict: {\'i1\':[\'123\'],\'i2\':[\'345\']}>
        i1 = request.POST.get("i1")
        i2 = request.POST.get("i2")
        i3 = int(i1) + int(i2)
        return HttpResponse(i3)
    return render(request,"index.html")
views.py

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap3 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- Bootstrap3 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- font-awesome.min.css图标库4.7版本 -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
    <button id="btn">点我</button>
</p>
<script>
    // 先给按钮绑定一个点击事件
    $("#btn").click(function () {
        // 朝后端发送ajax请求
        $.ajax({
            // 1、指定朝哪个后端发ajax请求
            url:"",  // 不写就是朝当前地址提交
            // 2、请求方式
            type:"post",   //不指定默认就是get,都是小写,用ajax提交post数据,后端也是在request.POST中接收
            // 3、数据
            data:{"i1":$("#d1").val(),"i2":$("#d2").val()},
            // 4、回调函数:当后端给你返回结果的时候会自动触发 args接收后端的返回结果
            success:function (args) {
                $("#d3").val(args)     // 通过DOM操作动态渲染到第三个input里面
            }
        })
    })
</script>
</body>
</html>
index.html

补充:如果视图函数返回字典需要序列化

# 针对后端如果是用HttpResponse返回的数据(json模块序列化后) 回调函数不会自动帮你反序列化
# 如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化

# HttpResponse解决方式
    1.自己在前端利用JSON.parse(args),手动反序列化
    2.在ajax里面配置一个参数
       dataType:"json",

示例1:后端使用JsonResponse返回数据

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r\'^admin/\', admin.site.urls),
    # ajax
    url(r\'^ab_ajax/\', views.ab_ajax),
]
urls.py

views.py

from django.shortcuts import render,HttpResponse,redirect
from django.http import JsonResponse

# Create your views here.
def ab_ajax(request):   # 和ajax交互的时候,无论返回什么,都不会作用于浏览器,而是交给ajax的回调函数
    if request.method == "POST":
        # print(request.POST)
        i1 = request.POST.get("i1")
        i2 = request.POST.get("i2")
        i3 = int(i1) + int(i2)
        d = {"code":100,"msg":i3}
        return JsonResponse(d)
    return render(request,"index.html")
views.py

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap3 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- Bootstrap3 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- font-awesome.min.css图标库4.7版本 -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
    <button id="btn">点我</button>
</p>
<script>
    // 先给按钮绑定一个点击事件
    $("#btn").click(function () {
        // 朝后端发送ajax请求
        $.ajax({
            // 1、指定朝哪个后端发ajax请求
            url:"",  // 不写就是朝当前地址提交
            // 2、请求方式
            type:"post",   //不指定默认就是get,都是小写,用ajax提交post数据,后端也是在request.POST中接收
            // 3、数据
            data:{"i1":$("#d1").val(),"i2":$("#d2").val()},
            // 4、回调函数:当后端给你返回结果的时候会自动触发 args接收后端的返回结果
            success:function (args) {
                {#$("#d3").val(args)     // 通过DOM操作动态渲染到第三个input里面#}
                console.log(typeof args)   // 接收到的是对象类型
            }
        })
    })
</script>
</body>
</html>
index.html

示例2:后端用HttpResponse返回的数据(json序列化后的数据)

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r\'^admin/\', admin.site.urls),
    # ajax
    url(r\'^ab_ajax/\', views.ab_ajax),
]
urls.py

views.py

from django.shortcuts import render,HttpResponse,redirect
import json
# Create your views here.
def ab_ajax(request):   # 和ajax交互的时候,无论返回什么,都不会作用于浏览器,而是交给ajax的回调函数
    if request.method == "POST":
        # print(request.POST)
        i1 = request.POST.get("i1")
        i2 = request.POST.get("i2")
        i3 = int(i1) + int(i2)
        d = {"code":100,"msg":i3}
        return HttpResponse(json.dumps(d))
    return render(request,"index.html")
views.py

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap3 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- Bootstrap3 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- font-awesome.min.css图标库4.7版本 -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
    Django之原生Ajax操作

django基础知识之Ajax:

django之jquery完成ajax

Django之AJAX请求

django之使用jquery完成ajax

Django之ajax的数据传输和分页器