jquery调用ajax方法
简介: ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
格式: $.ajax{()};
参数:
参数 | 描述 |
---|---|
type | 请求方式(get/post) |
url | 请求地址url |
async | 是否异步,默认是turn表示异步 |
dadat | 发送到服务器的数据 |
dataType | 预期服务器返回的数据类型 |
contentType | 设置请求头 |
success | 请求成功时调用此函数 |
error | 请求失败时调用此函数 |
示例:
<body>
<button type="button" id="btn">查询数据</button>
</body>
<script src="js/jquery-3.6.4.js" type="text/javascript" charset="utf-8"></script> ///导入jquery
<script type="text/javascript">
//点击按钮,发送ajax请求,将数据显示到页面中
$("btn").click(function){
$.ajax({
type:"get", //请求方式
url:"js/data.txt", //请求地址
data:{ //请求数据,json对象
uname:"zhangsan" //如果没有参数,则不需要设置
},
dataType:"json", //预期返回的数据类型,如果是json格式,在接受到返回值时会自动封装成json对象
//请求成功时调用的函数
success:function(data){ //data是形参名,代表的是返回的数据
console.log(data); //这里输出的data指data.text
//创建ul
var ul = $("<ul></ul>");
//遍历返回的数据数组
for(var i = 0; i < data.length; i++){
var user = data[i];
//创建li元素
var li ="<li>"+user.userName+"</li>";
//将li元素设置到ul元素中
ul.append(li);
}
console.log(ul);
//将ul设置到body标签中
$("body").append(ul);
}
});
}
</script>
Sass
简介:Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。
语法格式:
定义变量与值 :
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
使用变量 :
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
嵌套规则:
Sass代码:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
}
}
转换成的Css代码:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Sass转换为CSS:
在VScode中下载 Live Sass Compiler 插件,在插件的拓展设置中将插件参数改为以下代码后在项目css文件夹中创建拓展名为scss的文件即可实现自动转换
{
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Material Theme",
"editor.fontSize": 18,
"explorer.confirmDelete": false,
"liveSassCompile.settings.autoprefix": [
"ie >= 6",
"firefox >= 8",
"chrome >= 24",
"Opera>=10"
],
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
}
],
"liveSassCompile.settings.generateMap": false
}