前端技术总结——Ajax、JSON、Vue、Element

最新推荐文章于 2023-05-16 20:57:11 发布

我没得冰阔落.

最新推荐文章于 2023-05-16 20:57:11 发布

阅读量1.6k

点赞数 4

分类专栏： javaweb 文章标签： web java 架构

本文链接：https://blog.csdn.net/chenxingxingxing/article/details/123593385

版权

javaweb 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

一、AJAX

1、AJAX简介

AJAX全称：Asynchronous JavaScript And XML.翻译是一部的JavaScript和xml。是浏览器通过JavaScript代码异步发起请求，局部更新数据的技术。
AJAX作用：

与服务器进行数据交换：通过AJAX可以给服务器发起请求，获取响应。通过AJAX+HTML技术可以替换JSP技术。
异步交互：可以在不更新整个页面条件下，发送AJAX请求，局部更新页面。

2、原生AJAX实现

（1）编写servlet

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset = utf-8");

        resp.getWriter().write("原生AJAX请求！！！");
    }
}

（2）前端页面

发送Ajax请求一共就3步:

创建核心对象
发送请求
获取响应

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
//  创建核心对象
    var ajaxHttp;
    if(window.XMLHttpRequest){
        ajaxHttp = new XMLHttpRequest();
    }
//    发送请求
    ajaxHttp.open("GET","http://localhost:8080/weblearn/ajaxServlet");
    ajaxHttp.send();
//    获取响应
    ajaxHttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200){
            alert(this.responseText);
        }
    }
</script>

</body>
</html>

（3）测试结果

在这里插入图片描述

3、axios实现

axios是Ajax的封装，简化了Ajax请求。
实现步骤如下：

（1）引入Axios文件

链接：https://pan.baidu.com/s/118vEMAbtaVBQ8Bh8Ls3Nrg?pwd=77y5
提取码：77y5
在这里插入图片描述

（2）编写servlet

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset = utf-8");
        String username = req.getParameter("username");
        resp.getWriter().write("axios请求！！！");
        resp.getWriter().write("username="+username);
        System.out.println(username);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset = utf-8");
        String username = req.getParameter("username");
        resp.getWriter().write("axios请求！！！");
        resp.getWriter().write("username="+username);
    }
}

（3）axios前端代码


<script src="static/js/axios-0.18.0.js"></script>
<script>
    // axios发送get请求
    axios({
        method:"GET",
        url:"http://localhost:8080/weblearn/axiosServlet?username=cx"
    }).then(function (resp) {
        alert(resp.data);
    })
</script>

<script src="static/js/axios-0.18.0.js"></script>
<script>
    // axios发送post请求
    axios({
        method:"post",
        url:"http://localhost:8080/weblearn/axiosServlet",
        data:"username=cx"
    }).then(function (resp) {
        alert(resp.data);
    })
</script>

（4）测试结果

在这里插入图片描述

（5）axios简化发送请求

发送什么请求就在后面加上axios.请求方式（参数列表）

<script src="static/js/axios-0.18.0.js"></script>
<script>
    // axios简化发送post请求
    axios.post("http://localhost:8080/weblearn/axiosServlet", "username=cx").then(function (resp) {
        alert(resp.data);
    })
</script>

二、JSON

1、JSON简介

json：全称是JavaScript Object Notation(JavaScript 对象表示法)。就是把javascript的数据封装成对象的形式，方便我们对数据的存取。

2、JSON语法

json定义格式：var json = {键：‘值’，键：‘值’};
基本语法规则：
1.json 数据由键值对构成；
2.多个键值对之间由逗号隔开；
3.{}里面保存json对象；
4.[]里面保存数组，数组里面可以是多个json对象。
5.json值得几种情况：数字，字符串，逻辑值，数组，对象。

（1）json的三种定义方式

第一种：基本格式

var student = {name:"cx",age:18,address:"上海"};
alert(student.name);

第二种：嵌套格式一个json对象里面包含多个json对象

 var students = {students:[
         {name:"name001",age:18,address:"city001"},
         {name:"name002",age:18,address:"city002"},
         {name:"name002",age:18,address:"city003"},
     ]};
 alert(students);

第三种：嵌套格式定义一个多个json的对象

var students1 = [
    {name:"name001",age:18,address:"city001"},
    {name:"name002",age:18,address:"city002"},
    {name:"name002",age:18,address:"city003"},
    ];
alert(students1.length);

（2）json的获取

普通获取：

第一种：json对象.键名
```
 alert(student.name);
```
第二种：json对象[“键名”]
```
alert(student["address"]);
```
第三种：json数组[索引]
```
alert(students1[0].age);
```

循环遍历：

//获取students里面所有的键和值
//for in循环
for(var key in student){
    alert(key+":"+student[key]);
    //注意获取键值时不能用student.key；因为key是字符串类型的，转换之后就变成了student."key"
}

//遍历数组类型的所有值
for(var i=0 ;i<students1.length;i++){
    var stu = students1[i];
    //先获取每一个数组元素
    for(var key in stu){//在遍历数组元素里面的所有值
        alert(key+":"+stu[key]);
    }
}

3、JSON与java对象互换

（1）导入坐标

<!--        JSON坐标-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.70</version>
        </dependency>

（2）java对象转为JSON

String jsonStr = JSON.toJSONString(user);

（3）JSON字符串转为java对象

User user1 = JSON.parseObject(jsonStr,User.class);

（4）测试效果

    @Test
    public void testJson(){
        User user = new User(1,"cx","123456");
        String jsonStr = JSON.toJSONString(user);
        System.out.println(jsonStr);
        User user1 = JSON.parseObject(jsonStr,User.class);
        System.out.println(user1);

    }

在这里插入图片描述

三、vue

1、vue简介

Vue.js是用于构建交互式的 Web 界面的库。
它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。

2、实现vue小案例

（1）引入vue.js

1.直接下载vue.js
链接：https://pan.baidu.com/s/1b-zfnct9wBQV7h4JWD9wWQ?pwd=tu7b
提取码：tu7b
在这里插入图片描述

<script src="static/js/vue.js"></script>

2.通过cdn引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

（2）vue代码

el：表示vue的作用范围
data：绑定的模型

<div id="app" >
    <input v-model="username">
    {{username}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="static/js/vue.js"></script>-->
<script>
    //创建核心vue对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:""
            }
        }
    });
</script>

（3）运行效果

在这里插入图片描述

3、vue常用指令

v-modal：在表单上创建双向数据绑定

    <input v-model="username">
    {{username}}

v-bind：为html标签绑定属性值，css，herf等

    <a v-bind:href="url">点击</a><br>
    <a :href="url">点击</a>
    <input v-model="url">

v-on:为html标签绑定事件

<div id="app" >
    <input type="button" value="按钮" v-on:click="fun()"><br>
    <input type="button" value="按钮" @click="fun()"><br>

</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="static/js/vue.js"></script>
<script>
    //创建核心vue对象
    new Vue({
        el:"#app",
        data(){
            return{
            }
        },
        methods:{
            fun(){
                alert("111");
            }
        }
    });
</script>

v-if, v-else-if， v-else：和普通的if，else if ，else用法一样，满足对应条件就渲染该标签，否者就不渲染。

<div id="app" >
    <input type="text" v-model="num">
    <div v-if="num == 1">1</div>
    <div v-else-if="num == 2">2</div>
    <div v-else>0</div>

</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="static/js/vue.js"></script>
<script>
    //创建核心vue对象
    new Vue({
        el:"#app",
        data(){
            return{
                num:""
            }
        }
    });
</script>

v-show：满足条件就展示该区域，不满足就不展示。

<div id="app" >
    <input type="text" v-model="num">
    <div v-show="num == 1">我是1</div>

</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="static/js/vue.js"></script>
<script>
    //创建核心vue对象
    new Vue({
        el:"#app",
        data(){
            return{
                num:""
            }
        }
    });
</script>

v-for：遍历数组用

<div id="app" >

    <p v-for="h in hobby">
        爱好{{h}}
    </p>

    <p v-for="(h,i) in hobby">
        第{{i+1}}个爱好:{{h}}
    </p>

</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="static/js/vue.js"></script>
<script>
    //创建核心vue对象
    new Vue({
        el:"#app",
        data(){
            return{
                num:"",
                hobby:["java","c","python","go"]
            }
        }
    });
</script>

在这里插入图片描述

4、Element

1、Element简介

Element，一套基于 Vue 2.0 的桌面端组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度。使用Element首先要搭建一个基于 Vue 和 Element 的开发环境。

2、Element的使用

（1）导入Element库

由于文件夹文件太多，网盘不让传，所以没有上传。需要可以去官网下载或者私信。
在这里插入图片描述

（2）引入资源文件

<script src="static/js/vue.js"></script>
<script src="static/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="static/element-ui/lib/theme-chalk/index.css">

（3）创建Vue的核心对象

<div id="app">

</div>
<script>
    new Vue({
        el:"#app"
    })
</script>

（4）插入Element代码

下面我随便插几个：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>

</div>


<script src="static/js/vue.js"></script>
<script src="static/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="static/element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })
</script>

</body>
</html>

（4）运行效果

在这里插入图片描述

我没得冰阔落.

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
2
评论
前端技术总结——Ajax、JSON、Vue、Element

文章目录一、什么是Ajax请求二、原生AJAX请求1、编写后台servlet程序2、编写前端用户登录信息一、什么是Ajax请求AJAX全称：Asynchronous JavaScript And XML.翻译是一部的JavaScript和xml。是浏览器通过JavaScript代码异步发起请求，局部更新数据的技术。二、原生AJAX请求实现步骤1、编写后台servlet程序我的servlet程序是用来验证用户名是否存在。存在就通过response响应true，不存在就会响应一个false。1.在
复制链接

扫一扫