By GokiSoft.com| 15:04 26/08/2022|
Học HTML5 - CSS3

[Source Code] Tìm hiểu JSON & Ứng dụng JSON trong JS - Overview HTML - C2109I

#vidu.min.json


[{"fullname":"Tran Van A","email":"a@gmail.com","address":"Ha Noi"},{"fullname":"Tran Van B","email":"b@gmail.com","address":"Ha Noi"}]


#vidu.json


[
	{
		"fullname": "Tran Van A",
		"email": "a@gmail.com",
		"address": "Ha Noi"
	}, {
		"fullname": "Tran Van B",
		"email": "b@gmail.com",
		"address": "Ha Noi"
	}
]


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JSON & Javascript</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
	<button class="btn btn-success" name="loadClient">Load JSON Data</button>
	<button class="btn btn-danger" name="loadServer">Load JSON Data From Server</button>

	<table class="table table-bordered" style="margin-top: 20px;">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</th>
				<th>Email</th>
				<th>Address</th>
			</tr>
		</thead>
		<tbody id="result">
		</tbody>
	</table>
</div>

<script type="text/javascript">
	$('[name=loadClient]').click(function() {
		var data = [{"fullname":"Tran Van A","email":"a@gmail.com","address":"Ha Noi"},{"fullname":"Tran Van B","email":"b@gmail.com","address":"Ha Noi"}]
		/**
		var json = `[{"fullname":"Tran Van A","email":"a@gmail.com","address":"Ha Noi"},{"fullname":"Tran Van B","email":"b@gmail.com","address":"Ha Noi"}]`

		console.log(data)
		console.log(json)

		//Chuyen json string -> object | array trong JS
		var dataList = JSON.parse(json)
		console.log(dataList)

		//Chuyen object | array trong js -> json string
		var dataJson = JSON.stringify(data)
		console.log(dataJson)
		*/
		count = 0
		for(item of data) {
			$('#result').append(`<tr>
				<td>${++count}</td>
				<td>${item.fullname}</td>
				<td>${item.email}</td>
				<td>${item.address}</td>
			</tr>`)
		}
	})

	$('[name=loadServer]').click(function() {
		$.get('https://gokisoft.com/api/fake/49/json/student/list', function(data) {
			var dataList = JSON.parse(data)
			count = 0
			for(item of dataList) {
				$('#result').append(`<tr>
					<td>${++count}</td>
					<td>${item.fullname}</td>
					<td>${item.email}</td>
					<td>${item.address}</td>
				</tr>`)
			}
		})

		var js = "alert(123)";
		eval(js)
	})
</script>
</body>
</html>


#readme.txt


Nội dung kiến thức:
- Tìm hiểu về tài liệu JSON
- Ứng dụng JSON trong dự án
	- Làm việc JSON <-> JS


#bt1988.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Form Page</title>

	<style type="text/css">
		body {
			background-color: lightyellow;
		}

		.container {
			background-color: lightblue;
			width: 600px;
			margin: 0px auto;
			padding: 10px;
		}

		.group {
			margin-bottom: 10px;
			display: flex;
		}

		.group label {
			width: 20%;
			text-align: right;
			padding-right: 10px;
		}

		.group input, .group textarea {
			width: 80%;
			font-size: 16px;
		}

		.group button {
			margin-right: 10px;
		}

		.help {
			background-color: lightblue;
			padding: 5px;
			cursor: pointer;
			border-radius: 6px;
			color: blue;
			float: right;
			margin-right: 20%;
		}

		/*.parent {
			width: 100%;
		}

		.parent .col-1 {
			width: calc(100% / 12);
			float: left;
		}

		.parent .col-2 {
			width: calc(2 * 100% / 12);
			float: left;
		}

		.parent .col-3 {
			width: calc(3 * 100% / 12);
			float: left;
		}

		.parent .col-4 {
			width: calc(4 * 100% / 12);
			float: left;
		}

		.parent .col-5 {
			width: calc(5 * 100% / 12);
			float: left;
		}*/
	</style>
</head>
<body>
	<label class="help">HELP</label>
	<div class="container">
		<div class="group">
			<label></label>
			<h2>Compose E-Mail Message</h2>
		</div>
		<div class="group">
			<label>To: </label>
			<input type="text" name="to">
		</div>
		<div class="group">
			<label>From: </label>
			<input type="text" name="from">
		</div>
		<div class="group">
			<label>Cc: </label>
			<input type="text" name="cc">
		</div>
		<div class="group">
			<label>Subject: </label>
			<input type="text" name="subject">
		</div>
		<div class="group">
			<label>Message: </label>
			<textarea rows="5"></textarea>
		</div>
		<div class="group">
			<label></label>
			<button>Send</button>
			<button>Cancel</button>
		</div>
	</div>
</body>
</html>


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó