首页 > 其他分享 >Django框架之Ajax基础

Django框架之Ajax基础

时间：2024-04-07 22:22:31浏览次数：27  
标签：框架 json JSON Django Ajax result 序列化 data

一、JSON知识回顾

1、什么是JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，通常用于在网络之间传输数据。它基于JavaScript的语法，但是独立于编程语言，因此几乎所有编程语言都支持解析和生成JSON数据。

JSON数据采用键值对的形式来组织数据，其中键是字符串，值可以是字符串、数字、对象、数组、布尔值或null。JSON数据易于人类阅读和编写，也易于机器解析和生成，这使得它成为了一种流行的数据交换格式。

一个简单的JSON数据示例：

{
    "name": "Alice",
    "age": 25,
    "is_student": true,
    "hobbies": ["reading", "traveling"]
}

其他不合格的JSON对象：

{ name: "张三", 'age': 32 }  // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined }  // 不能使用undefined
{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}  // 不能使用函数和日期对象
}

JSON在Web开发中被广泛应用，用于在客户端和服务器之间传输数据。在前端开发中，常常使用JSON来处理从服务器获取的数据，然后将其展示在网页上。在后端开发中，常常将数据序列化为JSON格式，然后通过API接口提供给客户端应用程序。

2、JSON序列化与反序列化

JSON序列化是指将数据结构或对象转换为JSON格式的过程。在编程中，JSON序列化通常用于将数据转换为字符串形式，以便在网络上传输或存储到文件中。

JSON反序列化是将JSON格式的字符串转换回原始数据结构的过程。在反序列化过程中，JSON格式的字符串被解析并转换回相应的数据结构，例如字典、列表或对象。

（1）Python

① 序列化（将数据转换为JSON字符串）：

import json

data = {"name": "Alice", "age": 25}
json_string = json.dumps(data)
print(json_string)

② 反序列化（将JSON字符串转换为数据结构）：

import json

json_string = '{"name": "Alice", "age": 25}'
data = json.loads(json_string)
print(data)

（2）JavaScript

① 序列化（将数据转换为JSON字符串）：

var data = { name: "Alice", age: 25 };
var json_string = JSON.stringify(data);
console.log(json_string);

② 反序列化（将JSON字符串转换为数据结构）：

var json_string = '{"name": "Alice", "age": 25}';
var data = JSON.parse(json_string);
console.log(data);

（3）Java

① 使用 Jackson 库进行序列化和反序列化：

import com.fasterxml.jackson.databind.ObjectMapper;

ObjectMapper mapper = new ObjectMapper();

// 序列化
String json = mapper.writeValueAsString(object);

// 反序列化
MyObject obj = mapper.readValue(json, MyObject.class);

（4）C#

① 使用 Newtonsoft.Json 库进行序列化和反序列化：

using Newtonsoft.Json;

// 序列化
string json = JsonConvert.SerializeObject(object);

// 反序列化
MyObject obj = JsonConvert.DeserializeObject<MyObject>(json);

（5）PHP

① 序列化（将数据转换为JSON字符串）：

$data = ["name" => "Alice", "age" => 25];
$json_string = json_encode($data);
echo $json_string;

② 反序列化（将JSON字符串转换为数据结构）：

$json_string = '{"name": "Alice", "age": 25}';
$data = json_decode($json_string, true);
print_r($data);

以上是几种常见编程语言中执行JSON序列化和反序列化的方法示例。每种语言都有其特定的库或内置函数来处理JSON数据，但通常遵循类似的模式和用法。

3、和XML的比较

  • JSON 格式于2001年由 Douglas Crockford 提出
    • 目的就是取代繁琐笨重的 XML 格式。
  • JSON 格式有两个显著的优点：
    • 书写简单，一目了然；
    • 符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。
  • 所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。
  • XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较。
  • 用XML表示中国部分省市数据如下：
<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>
  • 用JSON表示如下：
{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

由上面的两端代码可以看出

JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读

并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽。

二、Ajax

1、什么是Ajax

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许在不重新加载整个页面的情况下，通过在后台与服务器进行数据交换，更新部分页面内容。Ajax的核心在于通过异步通信与服务器交换数据，使用户能够在不中断当前页面的情况下与服务器进行数据交互。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。(比较装饰器)

它的工作原理是：

  1. 用户与网页交互，触发事件（如点击按钮）。
  2. JavaScript通过XMLHttpRequest对象向服务器发送请求。
  3. 服务器处理请求并返回数据。
  4. JavaScript处理服务器返回的数据，更新页面内容

其精髓在于异步提交/局部刷新，例如动态获取用户名，实时跟后端确认并将结果展示给前端

2、Ajax的特点和优势

  1. 异步通信：Ajax允许在后台发送和接收数据，无需刷新整个页面。
  2. 实时性：通过Ajax，网页可以实时更新部分内容，提高用户体验。
  3. 减少带宽占用：由于只更新部分内容，减少了不必要的数据传输，节省了带宽。
  4. 交互性：Ajax使得网页更加交互式，用户可以与页面进行实时交互而无需等待页面刷新。
  5. 提高性能：减少了服务器和客户端之间的数据传输量，提高了网页性能。

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

3、向后端发送请求的方式

  • 浏览器地址直接输入url回车 GET请求
  • a标签href属性 GET请求
  • form表单 GET请求/POST请求
  • Ajax GET请求/POST请求

4、注意

现在我学的是jQuery封装之后的版本，所以我们在前端页面使用Ajax的时候需要确保导入了jQuery。

ps：并不只有jQuery能够实现ajax，其他的框架也可以，但是原理都是一样滴

三、Ajax小练习

1、需求

页面上有三个 input 框

  • 在前面两个框输入数字，点击按钮，朝后端发送Ajax请求
  • 在后端计算出结果，再返回给前端动态展示的第三个input框中

要求

  • 整个过程页面不能刷新，也不许在前端计算

2、普通版

（1）前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div>number1 : <input type="text" id="numberOne"></div>
<div>number2 : <input type="text" id="numberTwo"></div>
<div>result : <input type="text" id="numberResult"></div>

<button id="btn_result">点我计算结果</button>
<script>
    // 等待页面元素加载完毕。
    // 注意：$(document).ready() 与 window.onload 类似，都是页面加载完毕时触发的事件。
    $(document).ready(
        // 给按钮点击绑定事件
        // 注意：$("#btn_result") 表示获取 id 为 btn_result 的元素。
        $("#btn_result").click(function () {
            let numberOne = $("#numberOne").val();
            let numberTwo = $("#numberTwo").val();
            let result = $("#numberResult")
            // $.ajax为固定用法，表示启用ajax
            $.ajax(
                {
                    //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
                    url: "",
                    //type为标定你这个ajax请求的方法
                    type: "post",
                    //data后面跟的就是你提交给后端的数据
                    data: {numberOne: numberOne, numberTwo: numberTwo},
                    //success为回调函数，参数data即后端给你返回的数据
                    success: function (data) {
                        // 注意：data 表示返回的数据。
                        console.log(data)
                        //  注意：result.val(data) 表示将返回的数据赋值给 id 为 result 的元素的 value 属性。
                        result.val(data)
                    }
                }
            )
        })
    )
</script>
</body>
</html>

（2）后端(字符串)

  • 直接返回字符串结果
from django.shortcuts import render, HttpResponse


# Create your views here.
def add_number(request):
    if request.method == "POST":
        data = request.POST
        #  获取前端传递的参数
        # <QueryDict: {'numberOne': ['1'], 'numberTwo': ['2']}>
        number_one = data.get("numberOne")
        number_two = data.get("numberTwo")
        # 计算结果 ： 注意从前端取出来的数字是字符串类型，需要做类型转换才能运算
        result = int(number_one) + int(number_two)
        # 返回响应数据
        return HttpResponse(result)
    return render(request, "index.html")

3、升级版(json模块)

  • 后端返回的是字典格式(JSON)的数据
  • json模块序列化
from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
import json


# Create your views here.
def ab_ajax(request):
    if request.method == 'POST':
        # print(request.POST)  # <QueryDict: {'i1': ['3'], 'i2': ['4']}>
        num1 = request.POST.get('i1')  # 3 - 文本类型
        num2 = request.POST.get('i2')  # 4 - 文本类型
        # 强转类型并做运算
        sum = int(num1) + int(num2)
        # 返回数据
        data = {
            "message": "success",
            "sum": sum,
        }
        # 需要将数据序列化进行传输
        return HttpResponse(json.dumps(data))
    return render(request, 'ab_ajax.html')

（1）前端

  • 新增Ajax中的参数 dataType,指定返回的参数自动被序列化后的格式
<script>
    // 等待页面元素加载完毕。
    // 注意：$(document).ready() 与 window.onload 类似，都是页面加载完毕时触发的事件。
    $(document).ready(
        // 给按钮点击绑定事件
        // 注意：$("#btn_result") 表示获取 id 为 btn_result 的元素。
        $("#btn_result").click(function () {
            let numberOne = $("#numberOne").val();
            let numberTwo = $("#numberTwo").val();
            let result = $("#numberResult")
            $.ajax(
                {
                    url: "",
                    type: "post",
                    data: {numberOne: numberOne, numberTwo: numberTwo},
                    // 前端反序列化数据 方式一
                    // 在Ajax上加参数
                    // dataType 参数应该是一个字符串，表示期望从服务器返回的数据类型（如 "json", "xml", "script", "html" 等）
                    dataType: "json",
                    success: function (data) {
                        // 注意：data 表示返回的数据。
                        console.log(data) // {message: 'success', result: 4}
                        //  注意：result.val(data) 表示将返回的数据赋值给 id 为 result 的元素的 value 属性。
                        result.val(data.result)
                    }
                }
            )
        })
    )
</script>

（2）后端

from django.shortcuts import render, HttpResponse
import json


# Create your views here.
def add_number(request):
    if request.method == "POST":
        data = request.POST
        #  获取前端传递的参数
        # <QueryDict: {'numberOne': ['1'], 'numberTwo': ['2']}>
        number_one = data.get("numberOne")
        number_two = data.get("numberTwo")
        # 计算结果 ： 注意从前端取出来的数字是字符串类型，需要做类型转换才能运算
        result = int(number_one) + int(number_two)
        result = {
            "message": "success",
            "result": result
        }
        # 返回响应数据 - 使用json模块序列化成json字符串
        return HttpResponse(json.dumps(result))
    return render(request, "index.html")

4、进阶版(JsonResponse)

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


# Create your views here.

def add_number(request):
    if request.method == "POST":
        data = request.POST
        #  获取前端传递的参数
        # <QueryDict: {'numberOne': ['1'], 'numberTwo': ['2']}>
        number_one = data.get("numberOne")
        number_two = data.get("numberTwo")
        # 计算结果 ： 注意从前端取出来的数字是字符串类型，需要做类型转换才能运算
        result = int(number_one) + int(number_two)
        result = {
            "message": "success",
            "result": result
        }
        # 返回响应数据 - 使用JsonResponse对象序列化成json字符串
        return JsonResponse(result)
    return render(request, "index.html")

四、小结

1、ajax基本语法

<script>
    // 先给按钮绑定点击事件
    $('#btn').click(function () {
        // 向后端发送Ajax请求
        $.ajax({
            // （1）指定发送后端的请求接口
            url: '',// 不写就是朝当前地址发送请求
            
            // （2）请求方式
            type: "post", // 不指定默认就是 get 全小写
          
            // dataType 参数应该是一个字符串，表示期望从服务器返回的数据类型（如 "json", "xml", "script", "html" 等）
            // dataType: "json",
          
            // （3）提交数据
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
            
            // （4）异步提交有一个回调函数 （异步回调机制）
            // 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果
            success: function (args) {
                {#alert(args)#}
                // 通过DOM操作动态数据渲染到第三个 input 框中
                console.log(args) // string
                $('#d3').val(args)
            },
        })
    })
</script>

2、注意

  • 针对后端如果是用 HttpResponse 返回的数据，回调函数不会自动帮我们反序列化
  • 针对后端如果是用 JsonResponse 返回的数据，回调函数会自动帮我们反序列化

3、HttpResponse 解决方式

  • 后端先进行序列化，再返回数据给前端
  • 前端利用JSON.parse()
  • 前端加参数进行反序列化
    • 在ajax里面配置一个参数dataType:'json'

所以在我们写Ajax的时候，可以直接将dataType参数加上，以防万一，或者后端就用JsonResponse。

标签：框架,json,JSON,Django,Ajax,result,序列化,data
From： https://www.cnblogs.com/xiao01/p/18120052

相关文章

  • NET领域性能最好的对象映射框架Mapster使用方法
    Mapster是一个开源的.NET对象映射库，它提供了一种简单而强大的方式来处理对象之间的映射。在本文中，我将详细介绍如何在.NET中使用Mapster，并提供一些实例和源代码。和其它框架性能对比：Mapster的安装和配置：首先，打开VisualStudio并创建一个新的.NET项目。在NuGet包管理器控制台......
  • 【Spring进阶系列丨第七篇】Spring框架新注解分类及详解
    文章目录一、Spring新注解1.1、Configuration注解1.1.1、定义一个类1.1.2、使用Configuration注解修饰类1.1.3、作用1.2、Bean注解1.2.1、定义bean1.2.2、在主配置类中注册bean1.2.3、测试容器中是否有该bean1.2.4、注册bean的同时可以指定bean名称1.2.5、补充内容1.2.5......
  • 数码相框-编写框架
    程序框架程序界面：​程序结构：main.c调用一个T_PageAction​数据类型的Run函数，展示界面。​T_PageAction​类型的结构体。T_PageAction​结构体用于定义页面的行为接口，包含以下成员：.name:字符串，表示页面名称（这里是"main"），用于标识该页面。.Run:函数指针，指向执行页面......
  • 【22.0】Django框架之CBV添加装饰器的三种方式
    【一】引言给类视图函数添加装饰器需要借助第三方模块fromdjango.utils.decoratorsimportmethod_decorator【二】三种添加装饰器方式【1】给类方法加装饰器指名道姓的装--放在方法上面（1）路由path('login_view/',views.MyLogin.as_view()),（2）视图fromdjango.vi......
  • 【21.1】Django框架之会话Session补充
    【一】前言引入【1】HTTP特性之无状态因为因特网HTTP协议的特性，每一次来自于用户浏览器的请求（request）都是无状态的、独立的。通俗地说，就是无法保存用户状态，后台服务器根本就不知道当前请求和以前及以后请求是否来自同一用户。对于静态网站，这可能不是个问题，而对于动态网站，尤其......
  • 【21.0】Django框架之Cookie和Session
    【一】Cookie与Session的发展史Cookie和Session是用来在Web应用程序中跟踪用户会话数据的两种常用技术。【1】Cookie的发展史1994年，网景通信公司推出了第一个浏览器Cookie技术。Cookie是存储在用户计算机上的小型文本文件，用于跟踪用户在网站上的活动。初始版本的Cookie只......
  • 【24.0】Django框架之csrf跨站请求
    【一】跨站请求伪造介绍【1】引入CSRF（Cross-SiteRequestForgery）跨站请求伪造是一种常见的网络攻击方式。攻击者通过诱导受害者访问恶意网站或点击恶意链接将恶意请求发送到目标网站上利用受害者在目标网站中已登录的身份来执行某些操作从而达到攻击的目的。【2】举......
  • 【23.0】Django框架之中间件引入
    【一】Django中间件介绍【1】什么是Django中间件Django中间件是一个轻量级、可重用的组件，用于处理Django请求和响应的过程。它提供了对请求和响应进行全局处理的机制，可以在请求达到视图之前进行预处理或在响应返回给客户端之前进行后处理。中间件是按照顺序依次执行的，每......
  • 【26.1】Django框架之settings配置
    【一】引言Django项目的设置文件位于项目同名目录下，名叫settings.py。这个模块，集合了整个项目方方面面的设置属性，是项目启动和提供服务的根本保证。【二】简述settings.py文件本质上是一个Python模块，带有模块级别的变量。下面是一些示例设置：ALLOWED_HOSTS=['www.examp......
  • 【26.0】Django框架之settings源码
    【一】Django配置文件介绍Django框架默认提供给我们一个配置文件在我们项目根目录下的setting.py文件中，在里面我们可以看到很多的配置项并且我们能够自主的添加相应的配置但是其实这个文件只是Django暴露出来给我们的一个接口文件，在Django内部还存在一个更加强大的配置文件......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99