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的字符串必须使用双引号包围(单引号不行)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用友GRP-U8 userInfoWeb SQL注入致RCE漏洞复现 (XVE-2024-10539)

0x01 产品简介 用友GRP-U8R10行政事业内控管理软件是用友公司专注于国家电子政务事业,基于云计算技术所推出的新一代产品,是我国行政事业财务领域最专业的政府财务管理软件。 0x02 漏洞概述 用友GRP-U8R10行政事业内控管理软件 userInfoWeb接口处存在SQL注入漏洞,未授权的…

ADS使用记录之使用RFPro进行版图联合仿真-加入集总元器件

ADS使用记录之使用RFPro进行版图联合仿真-加入集总元器件 ADS使用记录之使用RFPro进行版图联合仿真中已经简单介绍了使用RFPro对版图就行仿真的方法。但是&#xff0c;如果版图中含有一些非微带的结构&#xff0c;比如说电感、电容、晶体管呢&#xff0c;在此举例解释一下。 …

leetcode61-Rotate List

题目 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&#xff1a;[4,5,1,2,3] 分析 这道题目用快慢指针即可解&#xff0c;先快指针往前走k个位置&#x…

MyBatis中关于resultType和resultMap的区别

在MyBatis中&#xff0c;resultType和resultMap都是用于处理查询结果的&#xff0c;但它们之间存在一些关键的区别。 映射方式&#xff1a; resultType&#xff1a;直接表示返回类型&#xff0c;它通常对应着Java模型对象&#xff08;如POJO&#xff09;中的实体。当查询出来的…

百度:文心大模型日均处理Tokens文本已达2490亿

今日&#xff0c;记者从百度获悉&#xff0c;文心大模型日均处理Tokens文本已达2490亿。百度表示&#xff0c;这几天&#xff0c;国内外多家厂商相继发布大模型最新进展和相关应用&#xff0c;百度很高兴地看到&#xff0c;“闭源大模型公有云”已经成为全球AI市场的主流趋势。…

Django信号与扩展:深入理解与实践

title: Django信号与扩展&#xff1a;深入理解与实践 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 后端开发 tags: Django信号松耦合观察者扩展安全性能 第一部分&#xff1a;Django信号基础 Django信号概述 一. Django信号的定义与作用 Django信…

NAT技术总结与双向NAT配置案例

NAT的转换方式&#xff1a; 1.静态转换&#xff1a;固定的一对一IP地址映射。 interface GigabitEthernet0/0/1 ip address 122.1.2.24 nat static global 122.1.2.1 inside 192.168.1.1 #在路由器出接口 公网地址 私网地址。 2.动态转换&#xff1a;Basic NAT nat address-gr…

有多少小于当前数字的数字

链接&#xff1a;https://leetcode.cn/problems/how-many-numbers-are-smaller-than-the-current-number/description/ 思路&#xff1a; 最简单的思路来说&#xff0c;就是双重for循环进行遍历&#xff0c;来判断个数&#xff0c; 优化思路&#xff0c;其中一个思路就是递推 …

day3 leetcode20 有效的括号

有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的相…

C语言操作符详解(一)

算术操作符&#xff1a; 算术操作符有&#xff1a;加法 减法- 乘法* 除法/ 取余% 算术操作符该注意的点&#xff1a; 1.除了%操作符之外&#xff0c;其他的操作符都可以作用于整数和浮点数。 2.对于/操作符来说&#xff0c;两个数都是整数的话&#xff0c;结果只能是…

[数组专题]力扣88

1. 力扣88 : 合并两个有序数组 题 : 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&…

多区域OSPF路由配置

一、基础配置 1.搭建实验拓扑图 2.实验编址 具体如何配置可以看这一篇详细的博文&#xff1a;单区域OSPF实验-CSDN博客 3.分别检查六个路由器的配置&#xff1a; 使用命令display ip interface brief R1的配置 其他大家可以调出来&#xff0c;再与实验拓扑图进行比对&#…

上班族兼职新篇章:10大实战攻略,轻松年赚1-20万

对于众多上班族而言&#xff0c;如何在工作之余赚取额外收入&#xff0c;开启自己的第一份副业&#xff0c;已成为许多人心中的疑问。每个人的才能和兴趣点不尽相同&#xff0c;但都有机会找到适合自己的兼职方式。接下来&#xff0c;就让我们一起探索这10大实战攻略&#xff0…

景源畅信电商:做抖音有哪些未开发的蓝海领域?

在互联网信息爆炸的今天&#xff0c;抖音已经成为人们获取信息和娱乐的重要渠道。然而&#xff0c;随着用户数量的增加和内容的丰富&#xff0c;抖音的红海竞争也日益激烈。在这样的背景下&#xff0c;寻找还未被充分开发的蓝海领域&#xff0c;对于内容创作者来说&#xff0c;…

kubernetes多master集群架构

一、完成master02节点的初始化操作 master02环境准备&#xff0c;详细过程参考上一期博客环境准备 #添加主机映射 vim /etc/hosts 192.168.88.3 master01 192.168.88.8 master02 192.168.88.4 node01 192.168.88.5 node021、准备master02节点需要的文件 从 master01 节点上拷…

Qt多文档程序的一种实现

注&#xff1a;文中所列代码质量不高&#xff0c;但不影响演示我的思路 实现思路说明 实现DemoApplication 相当于MFC中CWinAppEx的派生类&#xff0c;暂时没加什么功能。 DemoApplication.h #pragma once#include <QtWidgets/QApplication>//相当于MFC中CWinAppEx的派生…

医院预约挂号|基于Springboot+vue的医院预约挂号系统小程序的设计与实现(源码+数据库+文档)

医院预约挂号系统小程序 目录 基于Springboot&#xff0b;vue的医院预约挂号系统小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1小程序端 后台功能模块 4.2.1管理员功能 4.2.2医生功能 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选…

算法提高之香甜的黄油

算法提高之香甜的黄油 核心思想&#xff1a;spfa 遍历所有点作为起点 spfa求最短路最后求和返回 求最小 #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N 810,M 3000,INF 0x3f3f3f3f;int n,p,m;int id[N];…

腾讯混元文生图模型HunyuanDiT部署体验

最近&#xff0c;腾讯混元文生图模型HunyuanDiT 架构升级&#xff0c;并免费开源了。他采用的神经网络架构和Sara一样都是Diffusion Transformer&#xff0c;参数量已经达到15亿。官方测评效果显示超过目前开源的Stable Diffusion。试用下来效果比较令人惊喜。 建议硬件要求&am…

CCF-Csp算法能力认证, 202309-1坐标变换(其一)(C++)含解析

前言 推荐书目&#xff0c;在这里推荐那一本《算法笔记》&#xff08;胡明&#xff09;&#xff0c;需要PDF的话&#xff0c;链接如下 「链接&#xff1a;https://pan.xunlei.com/s/VNvz4BUFYqnx8kJ4BI4v1ywPA1?pwd6vdq# 提取码&#xff1a;6vdq”复制这段内容后打开手机迅雷…