jquery调用ajax方法,sass

蛋黄派i

已于 2023-03-19 11:34:36 修改

阅读量121

点赞数

分类专栏：周记文章标签： ajax sass 前端

于 2023-03-19 11:31:41 首次发布

本文链接：https://blog.csdn.net/2201_75702085/article/details/129643521

版权

周记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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
}