Ajax-JavaScript&JQuery實現方式

原創

2020-02-21 04:19

<!DOCTYPE html>
<html>
<head>
	<title>javascript 實現ajax實例</title>
	<style type="text/css">	
		
		*{
			font-size: 20px;
			line-height: 1.8;
		}
	</style>
</head>
<body>
	<h1>員工查詢</h1>
	<label>請輸入員工編號：</label>
	<input type="text" id="keyword"/><br>
	<button id="search">查詢</button>
	<p id="searchResult">123</p>
	
	<h1>員工新建</h1>
	<label>請輸入員工姓名：</label>
	<input type="text" id="staffName" /><br>
	<label>請輸入員工編號：</label>
	<input type="text" id="staffNumber" /><br>
	<label>請輸入員工性別：</label>
	<select id="staffSex">
		<option>男</option>
		<option>女</option>
	</select><br>
	<label>請輸入員工職位：</label>
	<input type="text" id="staffJob" /><br>
	<button id="save">保存</button>
	<p id="createResult">123</p>



	<script type="text/javascript">

	// 改寫爲json,服務器端返回json類型數據
	/*
		{
			"success":true,
			"msg":"XXX"
		}

	 */



	document.getElementById("search").onclick = function(){
		var request = new XMLHttpRequest();
		request.open("GET","get.php?number="+document.getElementById("keyword").value);
		request.send();
		request.onreadystatechange = function(){
			if(request.readyState === 4){
				if(request.status === 200){
					//document.getElementById("searchResult").innerHTML = request.responseText;
					var data = JSON.parse(request.responseText);
					if(data.success){
						document.getElementById("searchResult").innerHTML = request.responseText;
					}else{
						document.getElementById("searchResult").innerHTML = "出現錯誤"+request.responseText;
					}

				}else{
					alert("發生錯誤"+request.status);
				}

			}
		}
	}

	document.getElementById("save").onclick = function(){
		var request = new XMLHttpRequest();
		request.open("POST","get.php");

request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		var data = "name=" + document.getElementById("staffName").value
				 + "&number=" + document.getElementById("staffNumber").value
				 + "&sex=" + document.getElementById("staffSex").value
				 + "&job=" + document.getElementById("staffJob").value;
		request.setRequestHeader("Content-Type","application/x-www.form-urlencoded");
		request.send(data);
		request.onreadystatechange = function(){
			if(request.readyState === 4){
				if(request.status === 200){
					//document.getElementById("createResult").innerHTML = request.responseText;
					var data = JSON.parse(request.responseText);
					if(data.success){
						document.getElementById("searchResult").innerHTML = request.responseText;
					}else{
						document.getElementById("searchResult").innerHTML = "出現錯誤"+request.responseText;
					}
				}else{
					alert("發生錯誤"+request.status);
				}

			}
		}
	}	

	</script>
</body>
</html>

換成JQuery方法實現：

<!DOCTYPE html>
<html>
<head>
	<title>JQuery 實現ajax實例</title>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
	<style type="text/css">	
		
		*{
			font-size: 20px;
			line-height: 1.8;
		}
	</style>
</head>
<body>
	<h1>員工查詢</h1>
	<label>請輸入員工編號：</label>
	<input type="text" id="keyword"/><br>
	<button id="search">查詢</button>
	<p id="searchResult">123</p>
	
	<h1>員工新建</h1>
	<label>請輸入員工姓名：</label>
	<input type="text" id="staffName" /><br>
	<label>請輸入員工編號：</label>
	<input type="text" id="staffNumber" /><br>
	<label>請輸入員工性別：</label>
	<select id="staffSex">
		<option>男</option>
		<option>女</option>
	</select><br>
	<label>請輸入員工職位：</label>
	<input type="text" id="staffJob" /><br>
	<button id="save">保存</button>
	<p id="createResult">123</p>



	<script type="text/javascript">

	// 改寫爲json,服務器端返回json類型數據
	/*
		{
			"success":true,
			"msg":"XXX"
		}

	 */
	 $(document).ready(function(){

	 	$("#search").click(function(){
	 		$.ajax({
	 			type:"GET",
	 			url:"get.php?number="+$("keyword").val(),
	 			dataType:"json",
	 			success:function(data){
	 				if(data.success){
						$("searchResult").html(data.msg);
	 				}else{
	 					$("searchResult").html("出現錯誤"+data.msg);
	 				}
	 			},
	 			error:function(jqXHR){
	 				alert("發生錯誤"+jqXHR.status);
	 			}
	 		});
	 	});
	 });

	 	$("#save").click(function(){
	 		$.ajax({
	 			type:"POST",
	 			url:"get.php?number",
	 			dataType:"json",
	 			data:{
	 				name:$("#staffName").val();
	 				number:$("#staffNumber").val();
	 				sex:$("#staffSex").val();
	 				job:$("#staffJob").val();
	 			},
	 			success:function(data){
	 				if(data.success){
						$("createResult").html(data.msg);
	 				}else{
	 					$("createResult").html("出現錯誤"+data.msg);
	 				}
	 			},
	 			error:function(jqXHR){
	 				alert("發生錯誤"+jqXHR.status);
	 			}
	 		});
	 	});
	 });



	</script>
</body>
</html>