JQuery AJAX详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Angletank/article/details/108364069

Jquery Ajax简析

1.ajax请求

Ajax
	异步无刷新技术
$.ajax({
	type:"请求的方式  GET POST",
	url:"请求发送的地址",
	data:{
		//需要传输的数据
		uname:'admin',
		password:'1234'
	},
	dataType:'json/text'
	success:function(data){
		
	}
});

$.get();
	发送一个ajax GET请求
	$.get('请求路径',{请求参数},回调函数);
	
$.post();
	发送一个ajax post请求
	$.get('请求路径',{请求参数},回调函数);
	
$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
	console.log(data); // 要求返回的数据格式是JSON格式
});

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		 <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	$.ajax({
				type:'GET',
				url:'js/data.json',
				data:{
					uname:'admin',
					upassword:'123'
				},
				dataType:'json',
				success:function(data){
					console.log(data);
				}
			});
			
			// GET
			$.get('js/data.json',{name:"tom",age:100},function(data){
				console.log(data);
			});
			
			//404
			// $.post('js/data.json',{name:"tom",age:100},function(data){
			// 	console.log(data);
			// });
			
			//
			$.getJSON('js/data.json',{name:"tom",age:100},function(data){
				console.log(data); // 要求返回的数据格式是JSON格式
			});
		 </script>
	</body>
</html>

2.AjaxDemo

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 用户数据显示的标签 -->
		<div id="test" ></div>
		
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//发送请求
			$.ajax({
				type:'GET',
				url:'js/data.json',
				data:{},
				dataType:'json',
				success:function(data){
					//判断操作是否成功
					if(data.code == 1){
						loadData(data);
					}else{
						//请求失败
						$("#test").append("<h2 align='center'>"+data.msg+"</h2>");
					}
				}
			});
			
			function loadData(data){
				//展示数据
				//创建表格
				var table = $("<table align='center' width=600 border=1 style='border-collapse: collapse;'></table>");
				//创建表头
				var bt = "<tr><th>姓名</th><th>密码</th><th>年龄</th><th>工作</th><th>性别</th><th>操作</th><tr>";
				//将表头追加到表格中
				table.append(bt);
				
				//将数据存储到行中
				var dataArr = data.result;
				for(var i=0; i < dataArr.length; i++){
					var obj = dataArr[i];
					var uname = obj.uname;
					var usex = obj.usex ? '男':'女';
					//拼接一行数据
					var str = "<tr align='center'><td>"+uname+"</td><td>"+obj.upassword+"</td><td>"+obj.uage+"</td>";
					str += "<td>"+obj.ujob+"</td><td>"+usex+"</td><td><button>删除</button></td><tr>";
					
					table.append(str);
				}
				
				//将表格追加到div中
				$("#test").append(table);
			}
		</script>
	</body>
</html>