更新課本13章內容 @ 康寧路の劉老師

由於PHP屬於後台建置，為了不影響同學思路。改以API測試平台取代。

網路上有許多可以提供API測試的平台，在此以Jasonplacehoder舉例。

網址： https://jsonplaceholder.typicode.com/

將Ch13_4_2.html, Ch3_3_3.html及 ch13_5_1.html分別修改如下, 再開啟Chorome觀察Console和network記錄

Ch13_4_2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Ch13_4_2.html</title>
<style type="text/css">
.box {
width:100px;
background-color:#ffffff;
border:2px solid blue;
padding:10px;
}
</style> 
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit( function() {
// 取得表單欄位值
var typeVal = $('#type').val();
var nameVal = $('#name').val();
// 使用HTTP POST方法送出Ajax請求
$.post('https://jsonplaceholder.typicode.com/posts',
{ title : typeVal,
body : nameVal,
userId: 1, 
}, 
function(data) {
console.log(data); //用以了解回傳的資料型態
// 取出JSON資料
$('#result').html(data.body);
//alert("姓名: " + data[0].body); 
} 
); 
return false;
});
});
</script>
</head>
<body>
<div id="result" class="box"></div><br/>
<form>
<label>姓名: </label>
<input type="text" id="name"/><br/>
<select id="type">
<option value="date" selected>日期</option>
<option value="time">時間</option>
</select>
<input type="submit" value="送出">
</form>
</body>
</html>

Ch13_4_3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Ch13_4_3.html</title>
<style type="text/css">
.box {
width:100px;
background-color:#ffffff;
border:2px solid blue;
padding:10px;
}
</style> 
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit( function() {
// 取得表單欄位值
var formData = $('form').serialize();
$('#url').html(formData);
// 使用HTTP GET方法送出Ajax請求
$.get('https://jsonplaceholder.typicode.com/comments', formData,
function(data) {
// 取出JSON資料
console.log(data)
$('#result').html(data[0].body);
alert("姓名: " + data[0].email); 
} 
); 
return false;
});
});
</script>
</head>
<body>
<div id="url"></div>
<div id="result" class="box"></div><br/>
<form>
<label>姓名: </label>
<input type="text" id="name" name="postId"/><br/>
<!--
<select id="type" name="type">
<option value="date" selected>日期</option>
<option value="time">時間</option>
</select>
-->
<input type="submit" value="送出">
</form>
</body>
</html>

Ch13_4_5.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Ch13_4_5.html</title>
<style type="text/css">
.box {
width:100px;
background-color:#ffffff;
border:2px solid blue;
padding:10px;
}
</style> 
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit( function() {
// 取得表單欄位值
var typeVal = $('#type').val();
var nameVal = $('#name').val();
// 使用HTTP GET方法送出Ajax請求
$.ajax({
type: 'POST',
url: 'https://jsonplaceholder.typicode.com/posts',
data: { title : nameVal,
body : typeVal,
userId : 1 }, 
success: function(data) {
// 取出JSON資料
$('#result').html(data.title);
alert("姓名: " + data.body); 
} 
}); 
return false;
});
$('a.tabs').click(function() {
$.ajax({
type: 'GET',
url: 'https://jsonplaceholder.typicode.com/posts',
error: function() {
alert("載入網頁錯誤!");
}, 
success: function(data) {
alert("載入網頁成功!"); 
} 
}); 
return false;
});
});
</script>
</head>
<body>
<div id="result" class="box"></div><br/>
<form>
<label>姓名: </label>
<input type="text" id="name" name="name"/><br/>
<select id="type" name="type">
<option value="date" selected>日期</option>
<option value="time">時間</option>
</select>
<input type="submit" value="送出">
</form>
<a href="#" class="tabs">載入網頁</a>
</body>
</html>