学习笔记（九）——JSON 和 AJAX

最新推荐文章于 2024-03-18 23:19:39 发布
最新推荐文章于 2024-03-18 23:19:39 发布
阅读量7.5k 收藏 26
点赞数 14
分类专栏： web入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46485161/article/details/117404885
版权

文章目录

一、JSON

1.1、JSON 是什么？

JSON(JavaScript Object Notation): 就是一个特殊格式的字符串， 这个字符串可以被任意的语言所识别，而且可以转换为任意语言中的对象。主要用于数据的交互。

JSON 值可以是：

  1. 数字（整数或浮点数）
  2. 字符串（在双引号中）
  3. 逻辑值（true 或 false）
  4. 数组（在方括号中）
  5. 对象（在花括号中）
  6. 空值null

注意：
① 字符串嵌套：单引号套双引号，双引号套单引号
② json和js对象的格式一样，只不过json字符串中属性名必须要加双引号，其它和js语法一致，如：

var obj = '{"name":"monkey","age":18}'; //对象
var obj2 = '[{"name":"小明"},{"name":"小习"}]';  // 数组

1.2、JSON 字符串转 JS 对象

JSON 函数 parse() 可用于将 JSON 字符串转换为 JavaScript 对象。

示例：

var obj1 = '[{"name":"小明"},{"name":"小习"}]';
var js = JSON.parse(obj1);
console.log(typeof js);
console.log(js[1].name);
console.log(js[0].name);

结果：

object
小习
小明

1.3、JS 对象转 JSON 字符串

JSON 函数 stringify() 可用于将 JS 对象转换为 JSON 字符串。

示例：

var obj1 = [{name:"小明"},{name:"小习"}];//这里属性名name可加双引号也可以不加
var js = JSON.stringify(obj1);
console.log(typeof js);
console.log(js); //注意这里转为JSON字符串后，属性名自动加了双引号

结果：

string
[{"name":"小明"},{"name":"小习"}]

二、前后端交互

示例：
python代码：

import tornado.ioloop
import tornado.web

# 需求:在页面输入第一个数和第二个数之后，点击提交按钮，把输入的数据打印在控制台
class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #转发
        self.render("it.html") #这里的it.html是自己写的html，这里和python代码在同一级文件夹
    def post(self):
        #获取前端发送过来的数据
        print(self.get_argument('numone'))  #注意这里的numone和numtwo是前端提交的name值
        print(self.get_argument('numtwo'))

if __name__ == "__main__":
    application = tornado.web.Application([
        # / 代表前端程序访问的路径
        (r"/", MainHandler),
    ])
    application.listen(8889)   #8889:端口号
    tornado.ioloop.IOLoop.current().start()

html代码：

(注意这里代码我就写重要的部分)
<body>
	<form action="/" method="post">
		请在输入框内分别输入数据：
		<input type="text" name="numone">+
		<input type="text" name="numtwo">=
		<input type="submit" id="btn" value="提交">
	</form>
</body>

访问步骤:

  1. 运行python文件
  2. 在浏览器的地址栏手动输入: localhost:端口号 或者 127.0.0.1:端口号

注意：
使用表单的方式提交，如果需要更新内容，必需重载整个网页面。

三、AJAX

异步：调用不会立即得到结果，而是在调用方给出结果之前，先做其他的某些事情。
同步：调用某一个东西，调用方必须要等到结果之后才会继续往下执行。

3.1、什么是 AJAX ？

AJAX 全称 Ansync JavaScript and XML，是一门异步的加载技术，局部刷新。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

3.2、AJAX 使用

Ajax的使用分为原生和jq两种，需要掌握的jq的，原生了解就行。

书写格式：

$.ajax({
	//数据提交格式 post 或 get
	"type":"post",
	//后台 url   前端程序访问的路径
	"url":"/",	
	//传出的数据   name:自己去的名字
	"data":{"name1":数据1,"name2":数据1···},
	//服务器成功返回数据data
	"success":function(data){
	  	·····
	}
});

示例(post方式提交)：
（咳咳，求两数之和，其实要写的话挺简单，这里就当是用来做前后端交互的简单示例）
python代码：

import tornado.ioloop
import tornado.web

# 需求:在页面输入第一个数和第二个数之后，点击提交按钮，数据发送到后端，后端把输入的数据之和返回前端
class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #转发
        self.render("it.html")
    def post(self):
        #获取前端发送过来的数据并求和
        num1 = int(self.get_argument('data1'))  #注意data1是前端Ajax提交数据的属性名，要一致
        num2 = int(self.get_argument('data2'))
        sum = num1+num2
        #self.write()  将数据返回给前端
        result = {"sum":sum}
        self.write(result)


if __name__ == "__main__":
    application = tornado.web.Application([
        # 代表前端程序访问的路径  这里注意和前端一致
        (r"/", MainHandler),
    ])
    application.listen(8889)
    tornado.ioloop.IOLoop.current().start()

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>示例</title>
		<style>
			input{
				width: 50px;
			}
		</style>
	</head>
	<body>
		计算两数之和：<br>
		<input type="text">+
		<input type="text">=
		<input type="text">

		<button id="btn">计算</button>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script>
			var inp = $("input");
			$("#btn").click(function () {
				var data1 = inp.eq(0).val();
				var data2 = inp.eq(1).val();

				//传递值
				$.ajax({
					//数据提交格式 post 和 get
					"type":"post",
					//后台 url  这里注意和服务端一致
					"url":"/",
					//传出的数据
					"data":{"data1":data1,"data2":data2},
					"success":function(data){
					    inp.eq(2).val(data.sum)
					}
				});
            });
		</script>
	</body>
</html>

结果：

示例(get方式提交)：
python代码：

import tornado.ioloop
import tornado.web

  #get提交会调用get函数，所以我们重写个类，然后关联下就行了
class GetWay(tornado.web.RequestHandler):
    def get(self):
        # 获取前端发送过来的数据并求和
        num1 = int(self.get_argument('data1'))  # 注意data1是前端Ajax提交数据的属性名，要一致
        num2 = int(self.get_argument('data2'))
        sum = num1 + num2
        # self.write()  将数据返回给前端
        result = {"sum": sum}
        self.write(result)

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        #转发
        self.render("it.html")

if __name__ == "__main__":
    application = tornado.web.Application([
        # 代表前端程序访问的路径  这里注意和前端一致
        (r"/", MainHandler),
        # 要调用重写类，记得把前端程序访问路径改下
        (r"/r", GetWay),
    ])
    application.listen(8889)
    tornado.ioloop.IOLoop.current().start()

html代码：

(相比post提交，这里只要修改一点代码，我就不全写了)
$.ajax({
	//数据提交格式 post 和 get
	"type":"get",
	//后台 url   这里注意和服务端一致
	"url":"/r",
	//传出的数据
	"data":{"data1":data1,"data2":data2},
	"success":function(data){
	    inp.eq(2).val(data.sum)
	}
});

(这里结果我就不演示了，结果和用post方式提交一样)

注意：正常来讲我们还是用 post 提交方式好，因为get方式会在地址栏显示请求信息，但是地址栏能容纳的信息有限，约为4-5kb，若请求数据过大则容易出错，而post不会。故使用post方式可以保证信息的安全。

别呀
关注
  • 14
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论
专栏目录
AJAX和JSON的基础学习
weixin_42982622的博客
03-26 149
AJAX 概念：全称为（ ASynchronous JavaScript And XML ）异步的JavaScript 和 XML。 异步与同步的区别，当客户端与服务器进行交互的时候，异步是不需要等待服务器响应，可以继续执行操作，而同步是需要等待服务器响应，才能完成下一步操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。传统网页需要重新加载整个网页。 JQuery...
ajax与json的学习总结
黑猫小长的博客
02-27 9727
最近重温了下ajax与json技术，发现又收获了不少，这里记录下，我是一只接触编程8个月的小白，如有错误，还请指出，后面直接上干货。 首先，为什么要学习ajax与ajax的优势？   以我自己的理解，其实ajax就是方便数据从前端传递到后端。在java中，主要有两种。第一种就是通过html的form表单，通过submit直接传输到后端，但是这个提交有一个坏处，就是服务器端（servlet端）返
AJAX和JSON入门学习
逆天的博客
05-09 173
摘自正在学习的黑马java笔记 AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 通过在后台与服务器进行少量数据交换
Ajax 前后端数据交互
kk的博客
08-17 1万+
一篇文章搞懂ajax
前后端交互Ajax
weixin_54026054的博客
02-13 4135
关于前后端交互Ajax的相关知识
AngularJS学习笔记——通过Ajax获取JSON数据T
07-16
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例，现在把模型中的数据单独写成一个JSON文件，再通过发起Ajax请求的方式获取JSON数据。这样，清单列表中的数据项就都是通过JSON数据来获取的了。
jqGrid 学习笔记整理——进阶篇(一 )
11-23
此外，jqGrid 还支持多种数据源（如 JSON、XML、AJAX 等），可以通过更改 `datatype` 值来切换。对于远程数据，通常需要设置 `url` 参数来指定数据获取的地址，并可能需要配置 `mtype`（请求类型，通常是 GET 或 ...
7、使用JSON向服务器发送数据——ajax基础笔记
05-26
在“使用JSON向服务器发送数据——ajax基础笔记”这个主题中，我们首先会了解如何创建一个XMLHttpRequest对象。在JavaScript中，你可以通过`new XMLHttpRequest()`来实例化一个对象，然后利用它的方法如`open()`、`...
自己学习的php学习笔记
04-25
在自学习PHP的过程中，理解其...了解这些基础知识对于开发交互式Web应用，如AJAX（异步JavaScript和XML）应用程序，至关重要。虽然现在AJAX更多地涉及JSON而非XML，但理解其原理对于提高PHP Web开发技能仍然是必要的。
servlet学习笔记
01-23
【Servlet学习笔记】是关于Java Web开发中一个关键组件——Servlet的详细教程，它主要讲述了前端与后端如何协同工作，实现数据的交互和页面的动态呈现。在Web应用程序开发中，Servlet扮演着服务器端程序的角色，处理...
简单Ajax实例(带前后台交互)
06-08
附件为Ajax的几个实例，在JSP页面中实现,实现了前后端交互。
前后端数据交互ajax ，包括原生js的ajax,以及jquery中的ajax的使用(一)
01-08
一、初识 ajax ajax 是Asynchronous Javascript And XML四个单词的简写，粗略翻译为：异步的Javascript 和 XML. 1.异步：代表的是前端向后台发起请求，让后端处理完成，然后再返回一段数据，前端拿到返回的数据后需要做一系列的处理，前端处理这些数据就是异步的行为。（那一瞬间你没偶数据，等后端处理完成才能回头处理你的事件） 2.[removed] 这就不多说了，你懂的。 3.XML:标记语言，写法和html还很类似，但XML名字可以随便取。XML用来存放数据，前端用XML的格式发送数据给后端，后端也发送XML格式数据给前端，前段也好处理（相当于中
beego ajax实例，前后端数据交互，数据为json格式数据
06-16
此代码为beego框架实现的jQuery ajax省市二级联动，前后端交互为json数据。 此代码为beego框架实现的jQuery ajax省市二级联动，前后端交互为json数据。 此代码为beego框架实现的jQuery ajax省市二级联动，前后端交互为json数据。
HTML使用极简的方式通过ajax请求实现前后端交互代码实现
06-17
HTML使用极简的方式通过ajax请求实现前后端交互。文中不使用form表，为了方便ajax拼接其他参数。
前后端数据交互——ajax
loveryunz的博客
01-03 2301
数据交互-ajax
【JavaWeb】Day14.前后端交互基础——Ajax
最新发布
m0_74197695的博客
03-18 403
1.概念：异步的JavaScript和XML。不重新加载整个页面注意：AJAX 并不是编程语言。AJAX 是一种从网页访问 Web 服务器的技术。
ajax-前后端交互的艺术
m0_67776134的博客
02-17 348
在这篇博客中，我们将深入探讨AJAX的原理，并学习如何在实际项目中运用它进行前后端交互。XMLHttpRequest使得前端代码能够在不刷新整个页面的前提下更新部分内容，从而实现了所谓的"异步更新"。ajax是现在web开发中不可或缺的一部分，它使得前后端分离成为可能，并极大地提升了用户体验。通过理ajax的原理和实践技巧，你可以在你的项目中更有效地进行前后端交互。不断学习和实践，你ajax技能将不断提升，使你能够创造出更加出色的web应用。请求成功后，前端代码将处理返回的数据，并更新页面上的内容。
使用 ajax 进行前后端数据交互
搞钱
09-29 3707
ajax 一个前后台配合的技术，它可以让 javascript 发送 http 请求，与后台通信，获取数据和信息。 ajax 技术的原理是实例化 xmlhttp 对象，使用此对象与后台通信。jquery 将它封装成了一个函数 $.ajax()，我们可以直接用这个函数来执行 ajax 请求。
前后端数据交互——ajax（原生及jquery）
热门推荐
weixin_64037609的博客
10-23 1万+
前后端数据交互——ajax（原生及jquery）
NGN学习笔记1——NGN的基本概念和体系结构
06-10
NGN，即下一代网络（Next Generation Network），是一种基于IP（Internet Protocol）的全新的通信网络架构，它的目的是将语音、数据和视频等各种通信服务集成到一个统一的网络中，提供更加高效、灵活、可靠、安全和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值