Ajax前后端交互

最新推荐文章于 2024-08-06 09:48:43 发布

Alwaythere

最新推荐文章于 2024-08-06 09:48:43 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/lcl123456m/article/details/100916394

版权

Ajax前后端数据交互

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
		
			//定义入口函数
			window.onload=function(){
				
				//常见ajax请求对象
				var xmlHttp=new XMLHttpRequest();
				
				
				//绑定监听事件
				xmlHttp.onreadystatechange=function(){
					
					//判断网络状态码，获取服务器返回结果
					if(xmlHttp.readyState==4&&xmlHttp.status==200){
						
						//获取网络请求结果
						 var text=xmlHttp.responseText;
						 //弹出对话框提示响应内容
						 alert(text);
						 
					}
					
				}
				
				//绑定要请求的后台url
				xmlHttp.open("GET","http://172.31.34.108:9003/hello",true);
				
				//发送请求
				xmlHttp.send();
				  
			}
			
		</script>
	</head>
	<body>
		
	</body>
</html>

2.Jquery Ajax网络数据请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
//		
//			function f1(){
//				$.get("http://172.31.34.108:9003/hello",
//				function (data){
//					alert(data);
//				}
//			  );
//			}
//			window.onload=function(){
//				f1();
//			}

			window.onload=function(){
				$.post("http://172.31.34.108:9003/japost",{"username":"liu"},
				  function(data){
				  	alert(data);
				  }
				);
			}
			//$("#div1").
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>

/*原生JQuery_ajax*/
	function f1(){
			$.ajax({
			url:"http://172.31.34.108:9003/japost",
				data:{"username":"SJZ"},
				dataType:"Json",
				type:"POST",
				success:function(result){
					alert(result);
				},
				error:function(){
					alert("error");
				}
			  });
			}	
			
			window.onload=function(){
				f1();
			}

实例：

/**
$.ajax
* url 请求路径
* async： boolean 是否异步
* data：请求参数
* dataType：后台响应数据类型
* type：请求方式
* success：成功以后回调方法
* error :响应失败以后的回调方法
*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			function check(user,pswd){
				$.ajax({
					url:"http://172.31.34.108:9003/login",
					data:{uname:user,pwd:pswd},
					dataType:"json",
					type:"POST",
					success:function(result){
						
						$("#result").html(result.msg);
					}	
				});
			}
			
			$(document).ready(function(){
					$("#bt").click(function(){
						var name=$("#username").val();
						var pswd=$("#pswd").val();
						check(name,pswd);
					});
			});
		</script>
	</head>
	<body>
		<div style="width: 500px; height: 500px; margin: 50px auto; ">
			<div id="login" style="border: 1px dashed blue;">
				<table>
					<tr>
						<td>用户名:</td>
						<th><input type="text" id="username"/></th>
					</tr>
					<tr>
						<td>密　码  :</td>
						<th><input type="password" id="pswd"/></th>
					</tr>
					<tr>
						<th colspan="2"><input type="button" id="bt"  value="提交"/><input type="reset"  value="取消"/></th>
					</tr>
				</table>
			<div style="width: 200px; height: 25px;" id="result">结果显示</div>
			</div>
		</div>
		
	</body>
</html>

在这里插入图片描述