JQuery中的Ajax
.
A
j
a
x
说
明
1.
k
e
y
:
v
a
l
u
e
2.
t
y
p
e
:
a
j
a
x
请
求
的
方
式
：
g
e
t
/
p
o
s
t
/
p
u
t
/
d
e
l
e
t
e
类
型
3.
简
化
.Ajax说明 1.{key:value} 2.type:ajax请求的方式：get/post/put/delete 类型 3.简化
.Ajax说明1.key:value2.type:ajax请求的方式：get/post/put/delete类型3.简化.get(…) $post(…)
4.url:远程服务器地址
cache:true 缓存 默认为true
success:function(result){}成功后返回
error:function(){}失败后返回
async: false//默认为异步true
$.ajax({
type:"get",
url:"http://localhost:8090/getUser",
//data:{key:value,key:value1}
dataType: "json",
async: false,
cache: false,
success:function(result){
console.log(result)
},
error:function(){
alert("服务器正忙，请稍后！")
}
})
1.回调地狱
说明：由于ajax多层级嵌套 导致我们的返回值得回调函数解析困难。这种调用称为回调地狱。
如何解决：
1.闭包非闭
2.通过promise对象进行封装
2.JSON的格式
1.对象格式
{key1:value,key2:value2}
2.数组格式
[value1,value2,value3]
3.嵌套格式
["java编程","美团外卖",["吃","玩",{
"id":100,
"names": [
{"name": "梅超风"},
{"name": "梅超风老公"},
["张无忌","赵敏"]
]
}]]
3.同源策略
案例练习1:
URL: http://www.db.com/xxx
Ajax: https://www.db.com/xxx/xxx 协议不同
案例练习2:
URL: http://www.db.com:80/xxx/xxx 满足要求
Ajax: http://www.db.com:80/xxx/xxx/xxx
案例练习3: IP与域名对应
URL: http://www.db.com:80/xxx/xxx 不满足要求 域名不同
Ajax: http://10.0.0.6:80/xxx/xxx/xxx
案例练习4:
URL: http://www.db.com/xxx/xxx 不满足要求 域名不同
Ajax: http://www.jt.com/xxx/xxx/xxx
VUE
VUE的优点
1.体积小，压缩后的文件只有33k
2.运行效率更高
Vue入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE入门案例</title>
</head>
<body>
<!-- 语法规则：vue中必须要定义根目录标签 -->
<div id="app">
<!-- 利用 插值表达式 获取数据 -->
{{hello}}
</div>
<!-- 引入vue js -->
<script src="../js/vue.js"></script>
<!-- 编辑vue js -->
<script>
/**
* ES6 新规范
* 1.定义变量 var 弊端:没有作用域的概念
* 如果变量名称重复则可能就会引发问题
* 2.定义变量let let补足了var的弊端 有作用域的概念
* 3.常量 const 全局唯一不可更改
*/
const app = new Vue({
//表示vue对象的作用范围
el: "#app",
//定义数据对象
data:{
hello: "Vue入门"
}
})
</script>
</body>
</html>
v-cloak指令
当程序编译结束时该属性将不起作用。编译没有结束时 c-cloak的隐藏效果有效。
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div id="app" v-cloak>
{{hello}}
</div>
<style>
/* 位属性定义样式 */
[v-cloak]{
/* 定义样式 不显示 */
display: none;
}
</style>
v-text指令
v-text当数据没有解析成功时，页面没有任何的数据，相当于v-cloak的升级版！
<div id="app">
<!-- 1.插值表达式 -->
<h3>{{hello}}</h3>
<!-- 2.v-text方式 数据展现
v-text当数据没有解析成功时，页面没有任何的数据，相当于v-cloak的升级版
-->
<h3 v-text="hello"></h3>
</div>
<script type="text/jscript">
const app = new Vue({
el: "#app",
data:{
hello: "Vue入门"
}
})
</script>
v-html指令
将数据按照html形式进行解析
什么场景下使用：有时页面中的部分数据可能来源于其他的服务器.
服务器返回的是html代码片段,如果需要将代码片段渲染为页面形式,则使用该命令
<div v-html="html"></div>
<script type="text/jscript">
const app = new Vue({
el: "#app",
data:{
hello: "Vue入门",
html: "<h1>测试v-html</h1>"
}
})
</script>
v-pre指令
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
跳过大量没有指令的节点会加快编译。
<!-- 需求是展示原始的Mustache标签 -->
<div v-pre>{{需要展现元素的数据}}</div>
v-once指令
v-once 数据只渲染一次 不允许修改数据时
<div v-text="one" v-once></div>
v-model
v-model 双向数据绑定 适用于输入框
1.data中的数据发生变化时，页面数据同步更新
2.当我们的页面的input框中内容发生变化时，则同步更新data数据
<div style="border: aliceblue;">
<h3>双向数据绑定</h3>
用户名：<input type="text" name="name" v-model="name"/>
</div>
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
