jq day2

最新推荐文章于 2024-08-13 16:15:07 发布

A码

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量42

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41255707/article/details/133052880

版权

JSON

一种数据格式，广泛用于前后端数据交互

json文件扩展名是.json

特征：

1.只有符号：{} [] “” : ,

2.引号只能用双引号

3.字符串用引号，数字和boolean不加引号；属性也要用引号

4.json文件中不能写注释

用json描述对象

{
    "stuName": "张三",
    "stuSex": "男",
    "stuAge": 22
}

用json描述数组（列表）

[
    {
        "stuName": "张三",
        "stuSex": "男",
        "stuAge": 22
    },{
        "stuName": "李四",
        "stuSex": "男",
        "stuAge": 22
    } 
]

用json描述嵌套对象

{
    "className":"计科一班",
    "grade":"2022",
    "studentList":[
        {
            "stuName": "李四",
            "stuSex": "男",
            "stuAge": 22
        }
    ],
    "classRoom":{
        "roomNum":808
    }
}

json格式的字符串与js对象之间的转换

JSON.parse() : json字符串转js对象

JSON.stringify() : js对象转json字符串

// js对象的定义
let student = {} // 定义对象  js=>ts=>typtscript
student.name = "张三"
student.sex = '男'
student.age = 22
// student.getName = function(){
// 	return this.name
// }

console.log(student.name);
console.log(student);
// js对象转换为json字符串
console.log(JSON.stringify(student));

// json格式的字符串转换为js对象
let emp = JSON.parse('{"empName":"小王","empJob":"经理"}')
console.log(emp.empJob,emp.empName);

AJAX 异步请求

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

用于向后台发送异步请求，后台返回数据，主要返回JSON数据（也可以但会xml，text，html）

异步请求可以实现页面局部刷新

同步：排队执行，不存在线程不安全

异步：同时执行，有线程不安全的问题

jQuery的AJAX请求

get()

第一个参数是请求的url；

第二个参数是请求成功的回调函数，后台返回的数据在形参result里

$.get("test.json", (result) => {

})

post()

第一个参数是请求的url

第二个参数是提交的数据

第三个参数是回调函数
```
$.post('test.json',{
    name:"张三"
},(ret)=>{
    debugger
})
```

ajax()

ajax()是一个总和方法，它可以实现上面的个体或post请求

$.ajax({
    url:"test.json",
    type:"get",  //get或post，  不区分大小写
    dataType:"JSON"   ,//后台返回的数据格式， 不区分大小写
    data:{   // 提交的数据，如果没有数据提交，data参数可以省略
        name:"张三"
    },
    success: (ret) => {
        debugger
    }
})

练习：

1.按照下表的结构写一个json文件，里面有多条数据

2.写一个页面，页面上放一个表格

3.在页面初始化是发送ajax请求，把返回的数据填充到表格

book.json

[{
	"bookId": "1022",
	"bookName": "理想国",
	"bookAuthor": "柏拉图",
	"bookPrice": "1111.00",
	"bookDate": "2010-02-02 00:00:00",
	"bookNum": "520",
	"typeID": "2"
}, {
	"bookId": "1023",
	"bookName": "平凡的世界",
	"bookAuthor": "路遥",
	"bookPrice": "2222.00",
	"bookDate": "2010-02-03 00:00:00",
	"bookNum": "521",
	"typeID": "3"
}, {
	"bookId": "1024",
	"bookName": "百年孤独",
	"bookAuthor": "加西亚·马尔克斯",
	"bookPrice": "3333.00",
	"bookDate": "2010-02-04 00:00:00",
	"bookNum": "522",
	"typeID": "4"
}]

book.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过ajax获取数据填充到</title>
		<style type="text/css">
			table {
				width: 300px;
				border-collapse: collapse;
			}
			tr,
			td {
				border: 1px solid gray;
			}
			td {
				padding: 10px;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<script src="./js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(() => {
				$("body").append(`
				<table>
					<tr>
						<td>book_id</td>
						<td>book_name</td>
						<td>book_author</td>
						<td>book_price</td>
						<td>book_date</td>
						<td>book_num</td>
						<td>type_id</td>
					</tr>
				</table>`)

				// 请求数据
				$.ajax({
					url: "book.json",
					type: "GET",
					dataType: "JSON",
					success: (result) => {
						// 获取每一个对象
						result.forEach((book) => {
							$("table").append(`
							<tr>
								<td>${book.bookId}</td>
								<td>${book.bookName}</td>
								<td>${book.bookAuthor}</td>
								<td>${book.bookPrice}</td>
								<td>${book.bookDate}</td>
								<td>${book.bookNum}</td>
								<td>${book.typeID}</td>
							</tr>`)
						})
					}
				})
			})
		</script>
	</body>
</html>

Bootstrap

Bootstrap 是受欢迎的 HTML、CSS 和 JS 框架，是一套样式（组件）库，可以用它轻松实现比较美观的样式

官网：https://www.bootcss.com/

镜像：https://bootstrap.cn/

下载地址：https://v3.bootcss.com/getting-started/

通过 npm 进行安装

可以利用 npm 工具来安装 Bootstrap：

npm install bootstrap@3

常用样式

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

详细使用可参考官方文档

练习：

按下表写一个json列表
写一个表格，通过ajax请求数据，填充到表格
每一行后面有修改和删除按钮，点修改按钮在表单里显示当前行数据；点删除按钮删除当前行

home.json

[
	{
		"deId":1,
		"dpPlandate":"2020-11-16 16:15:09",
		"dpPlancontent":"电话沟通",
		"dpExecase":"对方同意购买",
		"dpExedate":"2020-11-16 17:54:14",
		"dpExemanager":"小红",
		"scId":2
	},
	{
		"deId":2,
		"dpPlandate":"2020-11-16 16:24:07",
		"dpPlancontent":"计划明天上午企业拜访",
		"dpExecase":"对方同意购买",
		"dpExedate":"2020-11-16 17:42:16",
		"dpExemanager":"小红",
		"scId":3
	},
	{
		"deId":3,
		"dpPlandate":"2020-06-18 00:00:00",
		"dpPlancontent":"去学校拜访",
		"dpExecase":"",
		"dpExedate":"2020-06-16 00:00:00",
		"dpExemanager":"杜经理",
		"scId":5
	},
	{
		"deId":4,
		"dpPlandate":"2020-06-09 00:00:00",
		"dpPlancontent":"111111",
		"dpExecase":"xxxx",
		"dpExedate":"2020-06-17 00:00:00",
		"dpExemanager":"杜经理",
		"scId":5
	},
	{
		"deId":5,
		"dpPlandate":"2020-06-16 00:00:00",
		"dpPlancontent":"电话沟通",
		"dpExecase":"打电话谈一下",
		"dpExedate":"2020-06-17 00:00:00",
		"dpExemanager":"ddd",
		"scId":6
	}
]

home.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过ajax请求获取数据填充到表格</title>
		<style type="text/css">
			.tbl1 {
				width: 400px;
				height: 200px;
				margin: 0 auto 30px;
				border-collapse: collapse;
			}
			.tbl1 td {
				display: flex;
				justify-content: space-between;
			}
			.tbl2 {
				width: 1000px;
				border: 1px solid gray;
				border-collapse: collapse;
				margin: auto;
			}
			tr,td {
				
				border: 1px solid gray;
				padding: 10px;
			}
			.tbl1 input{
				width: 250px;
				height: 25px;
			}
		</style>
	</head>
	<body>
		<form>
			<table class="tbl1">
				<tr>
					<td>部门号：
						<select name="deId">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>计划日期：
						<input type="text" name="dpPlandate" />
					</td>
				</tr>
				<tr>
					<td>计划内容：
						<input type="text" name="dpPlancontent" />
					</td>
				</tr>
				<tr>
					<td>执行情况：
						<input type="text" name="dpExecase" />
					</td>
				</tr>
				<tr>
					<td>执行日期：
						<input type="text" name="dpExedate" />
					</td>
				</tr>
				<tr>
					<td>执行管理者：
						<input type="text" name="dpExemanager" />
					</td>
				</tr>
				<tr>
					<td>sc_id：
						<input type="text" name="scId" />
					</td>
				</tr>
			</table>
		</form>
		<table class="tbl2">
			<tr style="background-color: lightgray;">
				<td>部门号</td>
				<td>计划日期</td>
				<td>计划内容</td>
				<td>执行情况</td>
				<td>执行日期</td>
				<td>执行管理者</td>
				<td>sc_id</td>
				<td></td>
			</tr>
		</table>
		<script src="./js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			// 通过ajax请求json数据
			$.ajax({
				url: "home.json",
				type: "GET",
				dataType: "JSON",
				success: (result) => {
					// 获取单个对象
					result.forEach((dp)=>{
						$(".tbl2").append(`
						<tr>
							<td>${dp.deId}</td>
							<td>${dp.dpPlandate}</td>
							<td>${dp.dpPlancontent}</td>
							<td>${dp.dpExecase}</td>
							<td>${dp.dpExedate}</td>
							<td>${dp.dpExemanager}</td>
							<td>${dp.scId}</td>
							<td>
								<input type="button" value="修改">
								<input type="button" value="删除">
							</td>
						</tr>`)	
					})
				}
			})
			
			// 通过事件冒泡机制处理点击按钮
			$(".tbl2").click((eventObject)=>{
				let btn = eventObject.target
				if(btn.value == "删除"){ // 删除
					if(confirm("确定删除？")){
						$(btn).parent().parent().remove()
					}
				}
				if(btn.value == "修改"){ // 修改
					let val = $(btn).parent().parent().children()
					let deId = val.eq(0).text()
					let dpPlandate = val.eq(1).text()
					let dpPlancontent =val.eq(2).text()
					let dpExecase = val.eq(3).text()
					let dpExedate =val.eq(4).text()
					let dpExemanager =val.eq(5).text()
					let scId =val.eq(6).text()
					// 输出信息到form表单(回写)
					$('.tbl1 select[name="deId"]').val(deId)
					$('.tbl1 input[name="dpPlandate"]').val(dpPlandate)
					$('.tbl1 input[name="dpPlancontent"]').val(dpPlancontent)
					$('.tbl1 input[name="dpExecase"]').val(dpExecase)
					$('.tbl1 input[name="dpExedate"]').val(dpExedate)
					$('.tbl1 input[name="dpExemanager"]').val(dpExemanager)
					$('.tbl1 input[name="scId"]').val(scId)
				}
			})
		</script>
	</body>
</html>