Ajax-JavaScript&JQuery实现方式

<!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,"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",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>

Ajax-JavaScript&JQuery实现方式

相关文章