17-5$.get()函数的二种工作模式

17-5$.get()函数的二种工作模式

顽脆慕诧吭碧哼腹癸晌钞郸抱


/**
* $.get(url,data,success)
* 功能: 从服务器上异步地获取数据
* 参数: url 请求的服务器处理脚本或数据源
* data 发送给服务器的数据,通常是查询字符串
* success 获取成功的回调处理函数
* 模式:
* 1.单向: 仅获取数据
* 2.双向: 根据客户端提供的条件进行查询后返回指定数据
*/


1.单向: 仅获取数据

目录结构:

17-5$.get()函数的二种工作模式第1张

demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.$.get()</title>
</head>
<body>
	<div></div>
	<button>获取数据</button>
</body>
</html>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('button').click(function(){

		//1.单向传递数据: 客户端直接向服务器请求数据
		var url = 'api/data.php'
		var success = function(res) {
			$('div').html(res)
		}
		$.get(url, success)
	})
	
	
</script>

data.php

<?php 
switch ($_GET['name']) {
	case 'site':
		echo '萌面人资料铺';	
		break;

	case 'domain':
		echo 'www.xuexianswer.com';	
		break;
	
	default:
		echo '<a href="www.xuexianswer.com">萌面人资料铺</a>欢迎您';
		break;
}

执行:

17-5$.get()函数的二种工作模式第2张


//2.双向传递: 客户端带上查询参数向服务器请求数据

demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.$.get()</title>
</head>
<body>
	<div></div>
	<button>获取数据</button>
</body>
</html>
<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$('button').eq(0).click(function(){
		
		//2.双向传递: 客户端带上查询参数向服务器请求数据
		var url = 'api/data.php'
		var data={
			'name': 'site'
		}
		var success=function(res){
			$('div').html(res)
		}
		
		$.get(url, data, success)
		
	})
	
</script>

执行:

17-5$.get()函数的二种工作模式第3张


尾侈兄适隘化九佳倦弓浆潮暮