一、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>