当前位置: 首页 > news >正文

es6新语法和ajax和json

es6新语法

1.定义变量:let

2.定义常量:const

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let i=3;const j="aaa";//不可更改</script>
</body>
</html>

3.模板字符串

模板字符串,要使用``重音符,使用${标识符}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//es5,字符串拼接需要使用+let username="hhh";console.log("用户名是:"+username);//es6,使用模板字符串console.log(`用户名是:${username}`);//${标识符}只能使用在重音符内//${标识符}不可以使用在单引号,双引号中</script>
</body>
</html>

4.参数默认值

在js中如果定义的函数有参数,调用的时候可以不传递实参,那么形参变量名就是undefined类型,值也是undefined,所以调用函数的时候不传递参数,就会使用函数默认值,如果传递实参就使用实参 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function name(name="jack"){console.log(name);}name();//jack,不传递实参,就使用默认值name("lose")//lose</script>
</body>
</html>

5.箭头函数

格式:

let 函数名 =(参数1,参数2...)=>{函数体};

如果函数体就一句话,可以省略{}和return 

使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//es5let add1=function(a,b){console.log(a+b);}add1(1,2);//3//es6let add2=(a,b)=>{console.log(a+b)};add2(1,2);//3//函数体只有一句话,可以省略{}let add3=(a,b)=>console.log(a+b);add3(1,2);//3let add4=(a,b)=>a+b;let result=add4(3,4);console.log(result);//7</script>
</body>
</html>

同步和异步

说明:向后台发送数据时,同步的方式是后台必须返回响应数据才可以在浏览器进行下一次操作,而异步方式可以在不需要等待后台服务器响应数据,直接可以进行其他操作。

ajax

可以完成前端和后台服务器的数据交互

好处

        1.网页局部更新

        2.异步请求

ajax的异步操作axios

使用前先导入

 <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

发送get请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<!-- 导入axios --><script>/*1.http://localhost:8080/axiosDemo01Servlet 表示后台服务器地址2.username=hhh&password=123:表示向后台携带的参数,和地址之间使用?分隔*///向后台发送ajax的get异步请求axios.get("http://localhost:8080/axiosDemo01Servlet?username=hhh&password=123").then(response=>{//后台响应成功,在这里处理后台响应数据的console.log(response);//response.data 接收服务端响应的数据console.log(response.data);}).catch(error=>{//后台出现异常在前端这里处理console.log(error);console.log("后台出现异常")}).finally(()=>{console.log("我是必须执行的");});</script>
</body>
</html>

 发送post请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script><script>//使用axios发送post请求axios.post("http://localhost:8080/axiosDemo01Servlet","username=hh&password=123").then(res=>{console.log("后台响应的数据是"+res.data);}).catch(err=>{//处理错误信息console.log(err);console.log("后台出现错误");}).finally(()=>{console.log("我是必须执行的")})</script>
</body>
</html>

json

1.json在js中是一个对象,在java中是字符串

2.作用:用来在前后台数据传输

3.格式

{key:value,key:value...}; 

 4.json语法

1. {} 表示对象

{name:value,name:value...}

2. [] 表示数组

[

{name:value,name:value...}

{name:value,name:value...}

]

注意:

1.其中name必须是string类型

        在json中,string类型的双引号可以省略,但是建议加上

2.value必须是以下数据类型

        字符串

        数字

        对象(json对象)

        数组

        布尔

        Null

3.json的字符串必须使用双引号包围(单引号不行)

相关文章:

es6新语法和ajax和json

es6新语法 1.定义变量&#xff1a;let 2.定义常量&#xff1a;const <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…...

Hadoop3:HDFS副本节点选择逻辑讲解

一、副本节点选择&#xff08;机架感知&#xff09; 说明 第一个副本&#xff0c;因为我们的client可能是web页&#xff0c;也可能是shell终端。 如果是web页&#xff0c;则随机选取一个节点&#xff0c;如果是shell终端&#xff0c;则选择当前shell终端所在的节点。 节点距离最…...

Java 高级面试问题及答案 更新(二)

Java 高级面试问题及答案 以下是几个常见的Java高级面试问题及其答案&#xff0c;这些问题覆盖了Java语言的核心概念和高级特性。 问题1: 什么是Java内存模型(JMM)&#xff0c;它在并发编程中扮演着什么角色&#xff1f; 答案&#xff1a; Java内存模型(JMM)是一个抽象的概念…...

MacOS安装Go

下载 Go 安装包&#xff1a; 访问 Go 官方网站的下载页面&#xff0c;找到适合 macOS 系统的 Go 安装包&#xff0c;并下载 go1.20.2.darwin-amd64.pkg&#xff08;假设你的 macOS 是 64 位系统&#xff09;。 安装 Go&#xff1a; 打开下载的安装包 go1.20.2.darwin-amd64.pk…...

【微服务最全详解】

文章目录 微服务微服务的介绍微服务服务架构演变 微服务网关微服务的负载均衡微服务的容灾机制服务崩溃服务容灾机制微服务熔断机制微服务限流Sentinel怎么实现限流微服务限流算法1.令牌桶算法2.漏斗桶算法 服务监控日志收集 微服务 微服务的介绍 微服务是一种软件架构风格&a…...

如何在云电脑实现虚拟应用—数据分层(应用分层)技术简介

数据分层&#xff08;应用分层&#xff09;技术简介 近几年虚拟化市场实现了非常大的发展&#xff0c;桌面虚拟化在企业中应用越来越广泛&#xff0c;其拥有的如下优点得到大量企业的青睐&#xff1a; 数据安全不落地。在虚拟化环境下面数据保存在中心服务器上面&#xff0c;…...

【动态规划五】回文串问题

目录 leetcode题目 一、回文子串 二、最长回文子串 三、分割回文串 IV 四、分割回文串 II 五、最长回文子序列 六、让字符串成为回文串的最少插入次数 leetcode题目 一、回文子串 647. 回文子串 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/…...

【C++杂货铺铺】AVL树

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 概念 &#x1f4c1; 节点的定义 &#x1f4c1; 插入 &#x1f4c1; 旋转 1 . 新节点插入较高左子树的左侧---左左&#xff1a;右单旋 2. 新节点插入较高右子树的右侧---右右&#xff1a;左单旋 3. 新节点插入较高左…...

【R语言】生存分析模型

生存分析模型是用于研究时间至某个事件发生的概率的统计模型。这个事件可以是死亡、疾病复发、治疗失败等。生存分析模型旨在解决在研究时间相关数据时的挑战&#xff0c;例如右侧截尾&#xff08;右侧截尾表示未观察到的事件发生&#xff0c;例如研究结束时还未发生事件&#…...

「AIGC」Python实现tokens算法

本文主要介绍通过python实现tokens统计,避免重复调用openai等官方api,开源节流。 一、设计思路 初始化tokenizer使用tokenizer将文本转换为tokens计算token的数量二、业务场景 2.1 首次加载依赖 2.2 执行业务逻辑 三、核心代码 from transformers import AutoTokenizer imp…...

【Unity】编程感悟20240510

【背景】 这一点感悟是过去有所认识&#xff0c;但是最近写Unity项目&#xff0c;涉及UDP通信需要持续监听逻辑时更加感受深刻的。 选用合适的触发点&#xff0c;用明确的逻辑避免循环处理 尽量采用明确的触发点使逻辑清晰&#xff0c;规避一定时间刷新这类的逻辑。 比如UDP…...

C#【进阶】泛型

1、泛型 文章目录 1、泛型1、泛型是什么2、泛型分类3、泛型类和接口4、泛型方法5、泛型的作用思考 泛型方法判断类型 2、泛型约束1、什么是泛型2、各泛型约束3、约束的组合使用4、多个泛型有约束思考1 泛型实现单例模式思考2 ArrayList泛型实现增删查改 1、泛型是什么 泛型实现…...

50. UE5 RPG FGameplayEffectContext

接下来&#xff0c;我想实现处理完伤害时&#xff0c;将伤害的触发格挡或者触发暴击时的逻辑传递到数据集的PostGameplayEffectExecute里面&#xff0c;这样&#xff0c;在处理IncomingDamage时&#xff0c;我们可以通过释放触发格挡或者触发暴击在UI上面进行对应的效果表现。 …...

Golang 的 unmarshal 踩坑指南

文章目录 1. 写在最前面2. 字段区分出空字段还是未设置字段2.1 问题描述2.2 解决 3. 字段支持多种类型 & 按需做不同类型处理3.1 问题描述3.2 解决 4. 碎碎念5. 参考资料 1. 写在最前面 笔者最近在实现将内部通知系统的数据定义转化为产品定义的对外提供的数据结构。 举例…...

Linux的常用指令 和 基础知识穿插巩固(巩固知识必看)

目录 前言 ls ls 扩展知识 ls -l ls -a ls -al cd cd 目录名 cd .. cd ~ cd - pwd 扩展知识 路径 / cp [选项] “源文件名” “目标文件名” mv [选项] “源文件名” “目标文件名” rm 作用 用法 ./"可执行程序名" mkdir rmdir touch m…...

MP3解码入门(基于libhelix)

主要参考资料: 【Arduino Linux】基于 Helix 解码库实现 MP3 音频播放: https://blog.csdn.net/weixin_42258222/article/details/122640413 libhelix-mp3: https://github.com/ultraembedded/libhelix-mp3/tree/master 目录 一、MP3文件二、MP3 解码库三、libhelix-mp3库3.1 …...

Oracle 中索引与完整性(SQL)

索引 在数据库中建立索引主要有以下作用&#xff1a; &#xff08;1&#xff09;快速存取数据&#xff1b; &#xff08;2&#xff09;既可以改善数据库性能&#xff0c;又可以保证列值的唯一性&#xff1b; &#xff08;3&#xff09;实现表与表之间的参照完整性&#xff1b;…...

【Linux深度学习笔记5.13(Apache)】

Apache : 1.安装yum -y install hhtpd2.启动hhtpd -k start3.停止httpd -k stop4.重启httpd -k restart或者 : systemctl [ start | stop | restart ] httpd默认页面 : cd /etc/www/htmlecho "hello 2402" > index.html验证 : 浏览器访问 : http://ip 访问控制…...

汇编语言入门:探索 x86 架构

目录 前言 1. x86 语言 x86 架构简介 x86 架构的特点 x86 架构的演变 x86 架构的应用 2. 常用汇编指令集 3. 寻址方式 结语 前言 汇编语言是一种低级编程语言&#xff0c;直接面向计算机的硬件架构。在计算机科学中&#xff0c;了解汇编语言是非常重要的&#xff0c;因…...

[ffmpeg处理指令]

1 将h264转为mp4 ffmpeg -f h264 -i front_far_0.264 -vcodec copy front_far_0.mp4 ffmpeg -f h264 -i front_near_0.264 -vcodec copy front_near_0.mp4 -i&#xff1a;表示输入文件 front_far_2.mp4&#xff1a;表示输出文件 2 h264转为图片 front_far 是目标路径,需要…...

基于Google App Engine构建物联网能耗监测系统:从传感器到可视化全栈实践

1. 项目概述与核心价值如果你和我一样&#xff0c;对家里或办公室里那些“电老虎”设备到底消耗了多少能源感到好奇&#xff0c;甚至想为节能减排做点贡献&#xff0c;那么自己动手搭建一个能耗监测系统会是一个极具成就感的项目。这不仅仅是技术上的挑战&#xff0c;更是一种将…...

WandEnhancer:彻底解锁WeMod专业版功能的终极解决方案

WandEnhancer&#xff1a;彻底解锁WeMod专业版功能的终极解决方案 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 还在为WeMod免费版的种种限制而烦恼吗…...

将 Hermes Agent 工具连接到 Taotoken 自定义模型提供方

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 将 Hermes Agent 工具连接到 Taotoken 自定义模型提供方 Hermes Agent 是一款功能强大的 AI 智能体开发工具&#xff0c;它支持通过…...

ChatGPT实时支付功能“不可见”的真相:不是没上线,而是被GDPR/SCA双重拦截——3分钟自查你的地区、浏览器、MFA配置是否全达标?

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;ChatGPT实时支付功能在哪里 ChatGPT 本身并不原生支持实时支付功能。OpenAI 官方发布的 ChatGPT&#xff08;包括免费版、Plus 订阅版及 Team/Enterprise 版&#xff09;定位为人工智能对话助手&#xff0c;其…...

BSS138I现货供应

在当今快速发展的电子行业中&#xff0c;BSS138I MOSFET作为一款广受欢迎的小信号N沟道MOSFET&#xff0c;因其低导通电阻、高可靠性和紧凑的SOT-23封装而备受青睐。对于需要采购BSS138I的客户来说&#xff0c;选择一个可靠的供应商至关重要。本文将深入探讨为何深圳市粤科源兴…...

QT无边框窗口实战:从圆角绘制到自定义标题栏与拖拽交互

1. 为什么需要无边框窗口&#xff1f; 现代桌面应用越来越注重视觉体验&#xff0c;传统的系统标题栏往往与整体设计风格格格不入。想象一下&#xff0c;你精心设计了一款深色主题的音乐播放器&#xff0c;顶部却突兀地挂着Windows默认的白色标题栏——这种割裂感正是无边框窗口…...

基于合宙Air001的交互式地球名片:从硬件焊接、Arduino编程到触摸优化

1. 项目概述与核心思路最近在创客圈子里&#xff0c;合宙的Air001开发板可以说是火得一塌糊涂。包装设计得挺酷&#xff0c;价格更是香到没朋友&#xff0c;最关键的是它完美支持Arduino IDE开发&#xff0c;对于咱们这些习惯了Arduino生态的玩家来说&#xff0c;上手门槛几乎为…...

思源宋体TTF完全指南:7种字重免费使用,打造专业中文排版

思源宋体TTF完全指南&#xff1a;7种字重免费使用&#xff0c;打造专业中文排版 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为中文排版找不到合适的免费字体而烦恼吗&#xff…...

Harnessclaw:轻量级自动化工作流编排工具,告别脚本泥潭

1. 项目概述&#xff1a;一个被低估的自动化利器如果你经常在GitHub上寻找一些能解决实际问题的工具&#xff0c;可能会发现一个现象&#xff1a;很多名字看起来平平无奇、甚至有点“怪”的项目&#xff0c;往往藏着巨大的潜力。harnessclaw/harnessclaw就是这样一个典型的例子…...

【2026年拼多多暑期实习/春招- 5月17日-第四题- 多多的道路修建Ⅱ】(题目+思路+JavaC++Python解析+在线测试)

题目内容 多多现在在负责多多乡村的修建。 道路修建问题可以看作是在一条直线上,有NNN个单位。 经过认真分析,他发现每一段路有两种修建的方案,分别为“修111”和“修22...