Ajax - 修訂歷史

丁志仁：/* 檔案上傳程式範例 */

2023-03-23T09:23:25Z

檔案上傳程式範例

丁志仁：/* (三)無 form 標籤，不用 fetch 而改用 ajax 後送，將後台回應塞入 Div */

2023-03-23T09:21:08Z

(三)無 form 標籤，不用 fetch 而改用 ajax 後送，將後台回應塞入 Div

丁志仁：/* (一)無 form 標籤 */

2023-03-23T09:14:43Z

(一)無 form 標籤

丁志仁：/* (二)後送圖解 */

2022-07-10T00:22:01Z

(二)後送圖解

丁志仁：/* 總覽 */

2022-07-09T08:05:15Z

總覽

丁志仁：/* (一)改善非同步的語法 */

2022-07-09T08:03:46Z

(一)改善非同步的語法

丁志仁：/* (一)用 Promise 改善 JavaScript 非同步的語法 */

2022-07-09T08:01:55Z

(一)用 Promise 改善 JavaScript 非同步的語法

丁志仁：/* (四)用 iframe 配合 target 使 form 後送不翻頁 */

2022-07-07T14:37:32Z

(四)用 iframe 配合 target 使 form 後送不翻頁

丁志仁：/* (四)用 iframe 配合 target 使 form 後送不翻頁 */

2022-07-07T14:34:26Z

(四)用 iframe 配合 target 使 form 後送不翻頁

丁志仁：/* (一)用 Promise 改善 JavaScript 非同步的語法 */

2022-07-07T00:37:08Z

(一)用 Promise 改善 JavaScript 非同步的語法

@@ 第154行： / 第154行： @@
 #並以 echo 回應成功或失敗，但此回應不會反映在前台程式執行上，因為前台沒有要處理回應
-'''整合前後台程式為：'''(DS218+/study/uploadAjax.php)
+'''整合前後台程式為：'''
 <pre><?php
 // 前置處理
@@ 第228行： / 第228行： @@
 ====(三)無 form 標籤，不用 fetch 而改用 ajax 後送，將後台回應塞入 Div====
 <pre><?php
 // 前置處理

@@ 第251行： / 第251行： @@
 		else{ahr = new ActiveXObject('Microsoft.XMLHTTP');}
 		function uploadFile() {
-			var formData = new FormData();
+			let formData = new FormData();
 			formData.append('file',fileupload.files[0]);
 			ahr.open('POST','".$_SERVER['PHP_SELF']."',true);

@@ 第154行： / 第154行： @@
 #並以 echo 回應成功或失敗，但此回應不會反映在前台程式執行上，因為前台沒有要處理回應
-'''整合前後台程式為：'''
+'''整合前後台程式為：'''(DS218+/study/uploadAjax.php)
 <pre><?php
 // 前置處理

@@ 第7行： / 第7行： @@
 #* Ajax物件.send(後送資料);
 ====(二)後送圖解====
-<img src='http://jendo.org/uploadFiles/學習資源/資訊/表單資料後送總覽.jpg' width='780'/>
+<img src='http://jendo.org/uploadFiles/學習資源/資訊/表單資料後送總覽.png' width='780'/>
 ====(三)簡易 QA====

@@ 第1行： / 第1行： @@
 ===總覽===
 <img src='http://jendo.org/uploadFiles/學習資源/資訊/表單資料後送總覽.jpg' width='780'/>
 Q: Promise 跟 Ajax 有什麼關係？

←上個修訂		於 2022年7月9日 (六) 08:03 的修訂
第13行：		第13行：

	Q: 請問 Promise 很常用到嗎？是否一定要學呢？<br/>使用頻率高，必學。		Q: 請問 Promise 很常用到嗎？是否一定要學呢？<br/>使用頻率高，必學。
−
−	~~====(一)改善非同步的語法====~~
−	#JavaScript 一次僅能做一件事情，遇到非同步的事件時，就會將非同步的事件移動到程式碼的最後方，等到所有的原始碼運行完以後才會執行非同步的事件。
−	~~#非同步事件如：~~
−	~~#*setTimeout( ()=>{console.log('非同步事件');} ,秒數); 其中的 setTimeout()~~
−	~~#*fetch(後送目的地,後送選項);~~
−	~~#* Ajax物件.send(後送資料);~~

	===HTTP 中的 Content-Type: multipart/form-data===		===HTTP 中的 Content-Type: multipart/form-data===

@@ 第14行： / 第14行： @@
 Q: 請問 Promise 很常用到嗎？是否一定要學呢？<br/>使用頻率高，必學。
-====(一)用 Promise 改善 JavaScript 非同步的語法====
+====(一)改善非同步的語法====
 #JavaScript 一次僅能做一件事情，遇到非同步的事件時，就會將非同步的事件移動到程式碼的最後方，等到所有的原始碼運行完以後才會執行非同步的事件。
 #非同步事件如：
@@ 第20行： / 第20行： @@
 #*fetch(後送目的地,後送選項);
 #* Ajax物件.send(後送資料);
 ===HTTP 中的 Content-Type: multipart/form-data===

@@ 第303行： / 第303行： @@
 <html>
 <body>
-	<form target='list' name='col_form' id='col_form' method='post' enctype='multipart/form-data'>
+	<form target='list' id='col_form' method='post' enctype='multipart/form-data'>
 		<input type='file' name='file'/>
 		<button onclick='uploadFile('col_form','list')'> Upload </button>

@@ 第293行： / 第293行： @@
 <pre><?php
 // 前置處理
-if($_POST['button']=='更新'){
+if(isset($_FILES['file']['name'])){
-	$filename = $_FILES['f']['name']['etTest']['ABC']['fileName'];
+	if(move_uploaded_file($_FILES['file']['tmp_name'],'./上傳資料夾/'.$_FILES['file']['name'])){
-	if(move_uploaded_file($_FILES['f']['tmp_name']['etTest']['ABC']['fileName'], "./upload/".$filename)){
+		echo 'Success';
-		echo 'Success';
+	}else{
-	}else{
+		echo 'Failure';
+	}
 }else{
-$str="<!DOCTYPE html>
+	$str="<!DOCTYPE html>
 <html>
- <head>
+<body>
-    <meta charset='UTF-8'/>
+	<form target='list' name='col_form' id='col_form' method='post' enctype='multipart/form-data'>
-	<title> Ajax JavaScript File Upload Example </title>
+		<input type='file' name='file'/>
- </head>
+		<button onclick='uploadFile('col_form','list')'> Upload </button>
- <body>
+	</form>
-  <!-- HTML5 Input Form Elements -->
+	<script>
 	async function uploadFile(formID,divID){
-	let formData = new FormData(document.getElementById(formID));
+		let formData = new FormData(document.getElementById(formID));
-	await fetch('".$_SERVER['PHP_SELF']."', {method: 'POST',body: formData}).then((response) => {return response.text();}).then((responseText)=> {document.getElementById(divID).innerHTML=responseText;});
+		await fetch('".$_SERVER['PHP_SELF']."',{method:'POST',body:formData}).then((response)=>{return response.text();}).then((responseText)=>{document.getElementById(divID).innerHTML=responseText;});
-−
+	}
-  </script>
+	</script>
-  <iframe id='list' name='list'></iframe>
+	<iframe id='list' name='list'></iframe>
- </body>
+</body>
 </html>";
-echo $str;
+	echo $str;
+}
 ?></pre>

@@ 第17行： / 第17行： @@
 #JavaScript 一次僅能做一件事情，遇到非同步的事件時，就會將非同步的事件移動到程式碼的最後方，等到所有的原始碼運行完以後才會執行非同步的事件。
 #非同步事件如：
-#*setTimeout( ()=>{console.log('非同步事件');} ,0); 其中的 setTimeout()
+#*setTimeout( ()=>{console.log('非同步事件');} ,秒數); 其中的 setTimeout()
-#*fetch(後送目的地,後送選項)
+#*fetch(後送目的地,後送選項);
-#* Ajax物件send(後送資料)
+#* Ajax物件.send(後送資料);
 #Promise 是一個建構函式，原生的方法如下：
 #*Promise.all

Ajax - 修訂歷史

丁志仁：​/* 檔案上傳程式範例 */

丁志仁：​/* (三)無 form 標籤，不用 fetch 而改用 ajax 後送，將後台回應塞入 Div */

丁志仁：​/* (一)無 form 標籤 */

丁志仁：​/* (二)後送圖解 */

丁志仁：​/* 總覽 */

丁志仁：​/* (一)改善非同步的語法 */

丁志仁：​/* (一)用 Promise 改善 JavaScript 非同步的語法 */

丁志仁：​/* (四)用 iframe 配合 target 使 form 後送不翻頁 */

丁志仁：​/* (四)用 iframe 配合 target 使 form 後送不翻頁 */

丁志仁：​/* (一)用 Promise 改善 JavaScript 非同步的語法 */

丁志仁：/* 檔案上傳程式範例 */

丁志仁：/* (三)無 form 標籤，不用 fetch 而改用 ajax 後送，將後台回應塞入 Div */

丁志仁：/* (一)無 form 標籤 */

丁志仁：/* (二)後送圖解 */

丁志仁：/* 總覽 */

丁志仁：/* (一)改善非同步的語法 */

丁志仁：/* (一)用 Promise 改善 JavaScript 非同步的語法 */

丁志仁：/* (四)用 iframe 配合 target 使 form 後送不翻頁 */

丁志仁：/* (四)用 iframe 配合 target 使 form 後送不翻頁 */

丁志仁：/* (一)用 Promise 改善 JavaScript 非同步的語法 */