Django框架之Ajax基础

一、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 发送 AJAX 请求,可以是 GET 或 POST 方式,也可以发送 JSON 或其它格式的数据。。
  3. 处理请求:HTTP 请求被发送到服务器,并被后端代码处理。后端代码可以使用 Java、PHP、Python 等多种编程语言来实现,返回数据通常是 JSON 或其它格式的字符串。
  4. 处理响应:前端 JavaScript 代码接收到后端返回的数据,根据数据类型进行解析和处理。对于 JSON 格式数据,通常使用 JSON.parse() 方法将字符串转换为对象。
  5. 更新页面:最终,前端 JavaScript 代码使用 DOM 操作更新页面内容,以此实现无需刷新页面即可更新数据的效果。
    例如:

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

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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/607593.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python turtle绘制图形详解

Python 的 Turtle 模块是一个简单而直观的绘图工具&#xff0c;可以帮助初学者理解基本的图形绘制概念。 1.导入 Turtle 模块&#xff1a; import turtle 2.创建 Turtle 对象&#xff1a; t turtle.Turtle() 3.绘制图形&#xff1a; 4.移动Turtle对象&#xff1a;t.forward(di…

【PMP战报】2024.3.10 PMP考试成绩出炉

PMP成绩查询及电子版证书下载 https://mp.weixin.qq.com/s/HgWrZWjJ0cScEYs4w1b4iwPMP项目管理学习专栏https://blog.csdn.net/xmws_it/category_10954848.html?spm1001.2014.3001.5482 2024年3月中国大陆的认证考试已经顺利结束。 从2024年5月7日开始&#xff0c;大约一周内…

小程序如何注销

随着移动互联网的深入发展&#xff0c;管控也越来越严格。现在小程序都要求进行ICP备案&#xff0c;不管是新注册的还是以往注册的。很多商家的小程序本身处于无运营状态&#xff0c;现在要求备案&#xff0c;还不如直接注销。下面&#xff0c;将详细介绍小程序注销的步骤和注意…

报错(已解决):无法加载文件 D:\code\NodeJs\pnpm.ps1,因为在此系统上禁止运行脚本。

问题&#xff1a; 在vscode运行uniapp项目需要拉取全部依赖&#xff0c;需要使用到pnpm&#xff0c;在vscode终端运行命令&#xff1a;pnpm install后报错&#xff1a; 解决办法&#xff1a; 1&#xff1a;我未安装pnpm&#xff0c;首先打开电脑cmd&#xff0c;运行下列命令&a…

XXL-JOB定时任务

1. xxl-job初识 1.1 xxl-job介绍 xxl-job 是大众点评大佬徐雪里开源的一款分布式任务调度框架&#xff0c;具有简单易用、轻量级、可扩展的特点。相比于Spring Task, Quartz&#xff0c;xxl-job有记录执行日志和运行大盘&#xff0c;方便开发人员和运维人员更好的管理任务。 …

震惊,现在面试都加科技与狠货了

震惊&#xff0c;现在面试都加科技与狠货了 生成式AI盛行的现在&#xff0c;程序员找工作变容易了吗我和老痒喝着大酒&#xff0c;吃着他的高升宴&#xff0c;听他说他面试的各种细节&#xff0c;老狗我只恨自己动作慢了一步&#xff0c;不然现在在那侃侃而谈的就是我了。 面试…

基于springboot+jsp+Mysql的商务安全邮箱邮件收发

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

使用QLoRA在自定义数据集上finetuning 大模型 LLAMA3 的数据比对分析

概述: 大型语言模型(LLM)展示了先进的功能和复杂的解决方案,使自然语言处理领域发生了革命性的变化。这些模型经过广泛的文本数据集训练,在文本生成、翻译、摘要和问答等任务中表现出色。尽管LLM具有强大的功能,但它可能并不总是与特定的任务或领域保持一致。 什么是LL…

探索全新商业模式:循环购的奥秘

你是否曾经遇到过这样的疑问&#xff1a;为何有的商家会推出“消费1000送2000”的优惠活动&#xff1f;每天还有钱可以领取&#xff0c;甚至还能提现&#xff1f;这背后究竟隐藏着怎样的商业逻辑&#xff1f;今天&#xff0c;作为你们的私域电商顾问&#xff0c;我将带大家深入…

【C++】继承 — 继承的引入、赋值切片详细讲解

前言 我们知道C语言是一门面向对象编程的语言&#xff0c;而面向对象编程有三大特性&#xff0c;它们分别是&#xff1a; 封装继承多态 目录 1. 继承的概念及定义1.1继承的概念1.2继承的定义格式1.3 继承的使用 2 基类和派生类对象赋值转换3 继承中的作用域3.1 派生类对象的存…

STM32使用L9110驱动电机自制小风扇

1.1 介绍&#xff1a; 该电机控制模块采用L9110电机控制芯片。该芯片具有两个TTL/CMOS兼容输入端子&#xff0c;并具有抗干扰特性&#xff1a;具有高电流驱动能力&#xff0c;两个输出端子可直接驱动直流电机&#xff0c;每个输出端口可提供750800mA动态电流&#xff0c;其峰值…

汽车行业芯片 车规级芯片 单车芯片( soc mcu)数量

链接&#xff1a;https://xueqiu.com/3000217281/272114755 10大车规级MCU芯片10大车规级MCU芯片 汽车芯片是什么&#xff1f; 汽车芯片即车规级芯片&#xff0c;标准要高于工业级和民用级芯片&#xff0c;仅次于军工级芯片。芯片大概有以下四种级别&#xff0c;分别是军工级…

Django关于ORM的增删改查

Django中使用orm进行数据库的管理&#xff0c;主要包括以下步骤 1、创建model&#xff0c; 2、进行迁移 3、在视图函数中使用 以下的内容可以先从查询开始看&#xff0c;这样更容易理解后面删除部分代码 主要包括几下几种&#xff1a; 1、增 1&#xff09;实例例化model,代…

js逆向,参数加密js混淆

关键词 JS 混淆、源码乱码、参数动态加密 逆向目标 题目1&#xff1a;抓取所有&#xff08;5页&#xff09;机票的价格&#xff0c;并计算所有机票价格的平均值&#xff0c;填入答案。 目标网址&#xff1a;https://match.yuanrenxue.cn/match/1目标接口&#xff1a;https://ma…

buuctf-misc题目练习二

ningen 打开题目后是一张图片&#xff0c;放进winhex里面 发现PK&#xff0c;PK是压缩包ZIP 文件的文件头&#xff0c;下一步是想办法进行分离 Foremost可以依据文件内的文件头和文件尾对一个文件进行分离&#xff0c;或者识别当前的文件是什么文件。比如拓展名被删除、被附加…

Nacos Docker 快速部署----解决nacos鉴权漏洞问题

Nacos Docker 快速部署 1. 说明 1.1 官方文档 官方地址 https://nacos.io/zh-cn/docs/v2/quickstart/quick-start.html docker启动文件的gitlhub地址 https://github.com/nacos-group/nacos-docker.git 问题&#xff1a; 缺少部分必要配置与说明 1.2 部署最新版本Nacos&…

【Linux调试器】:gdb的使用(常见指令)

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux调试器gdb的使用&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通…

数据结构与算法之树和二叉树--树和二叉树的一些性质

目录 前言 一、树的定义 二、树的若干术语 1.结点的度 2.叶子 3.双亲与孩子 4.兄弟 5.祖先 6.树的度 7.结点的层次 8.树的深度 9.有序树和无序树 10.森林 三、树的逻辑结构 四、树的存储结构 1.顺序存储 2.链式存储 五、二叉树 1.定义 2.二叉树的五种状态 …

PPT职场课:话术+技巧+框架+案例,告别只会念PPT不会讲(8节课)

课程目录 001-讲PPT如何开场及导入?5个简单实用的方法.mp4 002-讲PPT如何过渡衔接结尾?6类话术争来就用.mp4 003-掌握这3个逻辑表达万能框架&#xff0c;搞定98的PPT.mp4 004-学会这3种PPT结构讲解技巧告别只会念不会讲(上).mp4 005-学会这3种PPT结构讲解技巧告别只会念…

关于如何取消数据请求的操作

直接上码&#xff1a; class RequestManager {constructor() {this.requestQueue []}addRequestQueue(axios) {// 创建取消令牌const cancelToken axios.CancelToken.source()this.requestQueue.push(cancelToken.cancel)return cancelToken.token}clearRequestQueue() {thi…