版权声明：本文为CSDN博主「闪耀太阳」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_16804847/article/details/116482279
1 jQuery实现数据获取
1.1 业务说明
1).用户通过http://localhost:8090/userAjax 要求跳转到userAjax.html中
2).通过ajax请求向后端服务器获取数据,并且在页面中展现数据.
1.2 jQuery下载
1.3 Ajax介绍
1.3.1 Ajax特点
局部刷新-异步访问
同步: 当用户发起请求时,如果这时服务器正忙,那么用户处于等待的状态,同时不可以做其他的操作.
异步: 当用户发起请求时,如果遇到服务器正忙,这时用户可以继续执行后续的操作.同时通过回调函数与服务器沟通.
1.3.2 Ajax异步原理
1).常规同步的调用方式
2).Ajax异步调用
说明: Ajax通过Ajax引擎实现异步的调用.当后台的服务器响应数据之后,通过预先设置好的回调函数进行数据的展现.
1.4 关于JS 循环遍历的写法
1.常规for循环
for(var i=0;i<result.length;i++){
var user = result[i];
console.log(user)
}
2.使用in的关键字
//关键字 in index 代表遍历的下标
for(index in result){
var user = result[index]
console.log(user)
}
3.使用of关键字
for(user of result){
console.log(user)
}
1.5 编辑页面JS
<!DOCTYPE html>
<!--导入模板标签!!!!!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户列表数据</title>
<!--
1.引入函数类库
2.使用模板工具类中的静态资源文件默认的路径都在static目录下
-->
<script src="/jquery-3.6.0.min.js"></script>
<script>
//1.jQuery中有一种编程思想 函数式编程
$(function(){
//让整个页面加载完成之后再执行. 以后所有的操作都应该在函数内完成!!!!
/**
* 常见Ajax用法
* 1.$.get(url地址,提交数据,回调函数,返回值类型)
* 2.$.post(...)
*
* for循环的写法
1.常规for循环
for(var i=0;i<result.length;i++){
var user = result[i];
console.log(user)
}
2.使用in的关键字
//关键字 in index 代表遍历的下标
for(index in result){
var user = result[index]
console.log(user)
}
*
3.使用of关键字
for(user of result){
console.log(user)
}
* 业务需求:
* 要求向后端服务器发起请求 /findAjaxUser,之后将返回值结果 进行页面解析
*/
$.get("/findAjaxUser",function(result){
//1.result是服务器返回的结果 [{},{},{}....}]
//2.将返回值结果进行循环遍历
for(user of result){
//3.获取对象的属性值
var id = user.id
var name = user.name
var age = user.age
var sex = user.sex
var tr = "<tr align='center'><td>"+ id +"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
//4.选中id=userTable的元素
//5.之后追加数据append(追加的内容)
$("#userTable").append(tr)
}
})
})
</script>
</head>
<body>
<table id="userTable" border="1px" align="center" width="800px">
<tr align="center">
<td colspan="4"><h3>用户列表</h3></td>
</tr>
<tr align="center">
<td>ID</td>
<td>名称</td>
<td>年龄</td>
<td>性别</td>
</tr>
</table>
</body>
</html>
1.6 编辑UserController
根据前端ajax请求.处理业务
1.7 页面效果调用
1.8 关于常见Ajax种类介绍
1.8.1 带参数的请求
1).字符串拼接
/**
* 参数说明:
* 1.key=value&key2=value2....
* 例如: id=1&name=tom
*
*/
$.get("/findAjaxUser",'id=1&name=tom',function(result){
console.log("ajax请求成功!!!")
})
2).js对象的写法
语法: {key:value,key2:value2.....}
例如: {id:1,name='tom'}
1.8.2 post请求结构
1.8.3 getJSON类型
1.8.4 $.ajax类型
1.9 前端的知识架构
1.10 请求类型说明
1.10.1 get请求
1.会将参数通过?号的形式进行拼接. http://localhost:8090/findUser?id=1&password=123456
2.get请求会将所有的参数动态的拼接到URL中,相对不安全.
3.Get请求不适用于大量的数据提交 各大的浏览器对于Get请求一般都是有上限的.
总结:
1.查询数据时.
2.获取简单数据时使用(页面/JS/CSS…)
3.一般请求中get请求居多.
1.10.2 POST
1.POST请求将所有的参数都会进行form的封装.
2.如果需要传递海量的数据,则首选POST
3.POST的请求使用form进行封装,相对于GET请求更加的安全.
总结:
1.提交海量的数据时使用.
2.一般提交文件时使用
3.提交
1.11 作业
将用户列表使用jQuery的方式实现修改和删除 (提高!!!)
2 VUE
2.1 VUE介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式(灵活)框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2.2 VUE入门案例
2.2.1 导入JS
说明: 将课前资料中的js文件导入IDEA中 如图所示
2.2.2 VUE入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE入门案例</title>
</head>
<body>
<div id="app">
<!-- 插值表达式 内容 data中对象的属性 -->
<h1>{{hello}}</h1>
</div>
<!-- 1.导入vue.js的类库 -->
<script src="../js/vue.js"></script>
<!-- 2.编辑VUE js -->
<script>
//新规定: 1.结尾的;号可以省略 2.字符一般使用'单引号'
//补充知识: var: js中声明变量的修饰符 没有作用域的概念
// 1.const 定义常量的
// 2.let 有作用域的变量声明.
//1.实例化VUE对象 函数式编程
const app = new Vue({
//1.定义el元素 要在哪个位置使用vue进行渲染
el: "#app",
//2.定义数据对象
data: {
hello: 'VUE入门案例!!!!'
}
})
</script>
</body>
</html>
2.3 VUE基本用法
2.3.1 v-clock属性
需求: 由于插值表达式在渲染没有完成时,会展现{
{xxx}}效果,用户体验不好 是否可以优化.
优化: 如果在渲染没有完成时,不给用户展现任何信息.
2.3.2 v-text指令
2.3.2 v-html指令
作用: 将html标记语言,以渲染之后的效果进行展现
2.3.3 v-pre指令
需求: 有时如果用户就想展现{
{name}}数据.如何处理
2.3.4 v-once指令
如果数据只需要VUE解析一次之后不需要再次解析,则可以使用该指令
2.3.5 v-model指令
说明: 如果需要实现页面的数据与属性实现双向数据绑定,则使用v-model!!!
一般在输入框中最为常用,一般用来保证数据的一致性.
2.3.6 MVVM思想
1.M Model 代表数据
2.V View 代表视图
3.VM (view-model) 视图与数据的控制层
1.当用户数据发生变化时,同步的修改页面的数据
2.当页面的数据变化时,会被监听器监听,同步修改model数据.
955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
