es6新语法和ajax和json

2024-05-16 06:38:09
开发
28

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>
        //es5
        let add1=function(a,b)
        {
            console.log(a+b);
        }
        add1(1,2);//3

        //es6
        let add2=(a,b)=>{console.log(a+b)};
        add2(1,2);//3

        //函数体只有一句话，可以省略{}
        let add3=(a,b)=>console.log(a+b);
        add3(1,2);//3

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

原文地址:https://blog.csdn.net/luosuss/article/details/138902534 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1790874336576540672.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部