Ajax案例

最新推荐文章于 2025-05-24 12:32:50 发布

m0_59138290

最新推荐文章于 2025-05-24 12:32:50 发布

阅读量149

点赞数

分类专栏：前端基础文章标签： ajax javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_59138290/article/details/129630544

版权

前端基础专栏收录该内容

2 篇文章

订阅专栏

该文展示了两个示例，一是利用Ajax和jsonp技术从百度接口获取搜索关键词的建议，用户在输入框输入时动态更新；二是实现了天气查询功能，用户输入城市名后展示天气信息详情。这两个例子都涉及到了动态网页交互和跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax案例

百度接口搜索关键词

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>jsonp访问百度关键字</title>
		<link rel="stylesheet" href="../css/baiduInterface.css" type="text/css"/>
		<script src="../js/jquery-1.8.3.js"></script>
		<script src="../js/baidujiekou.js"></script>
	</head>
	<body>
		<div id="container">
			<div>
				<input type="text" id="keywords" placeholder="请输入搜索关键词">
				<input type="submit" id="sousuo" onclick="start()" value="百度搜索">
			</div>
			<ul id="sug">
				<!-- 返回的信息 -->
			</ul>
		</div>

	</body>
</html>

css

* {
	margin: 0px;
	padding: 0px;
}

#container {
	width: 800px;
	margin: auto;
}

input[id="keywords"] {
	width: 500px;
	height: 40px;
	border: solid 2px #cecece;
	font-size: 22px;
	line-height: 40px;
	color: #888;
	padding-left: 10px;
}

#sug {
	width: 512px;
	list-style: none;
	border: solid 1px #ccc;
}

#sug li {
	height: 30px;
	background: #ccc;
	line-height: 30px;
	font-size: 18px;
}

JavaScript

$(function() {
	// 获取数输入框
	var $kw = $("#keywords");
	// 当键盘上有按键 被抬起时触发 
	$kw.keyup(function() {
		// 获取输入框中的输入值
		var $value = $kw.val();
		// 调用函数，获取数据
		$.ajax({
			// 服务器地址： 百度公开提供的数据查询功能
			url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=?",
			type: "get",
			data: {
				wd: $value
			}, //将输入框的值 传递给 url
			dataType: "jsonp", // 跨域访问
			success: function(msg) { // 成功

				// 当url接口访问成功时，自动调用success对应的函数，
				// 接口返回的数据会自动存放在函数的参数data中
				console.log(msg.s);
				// 将输入输出到页面中：dom操作
				var _sug = msg.s;
				// 清空原来的ul标签
				$("#sug").empty();
				for (var i = 0; i < _sug.length; i++) {
					// 创建一个li标签
					var $li = $("<li>");
					// 标签中添加文本数据
					$li.text(_sug[i]);
					// 将li标签，添加到页面中
					$("#sug").append($li);
				}
			}
		});
	});
})

function start() {
	var $kw = $("#keywords");
	var $value = $kw.val();
	$.ajax({
		url: "",
		type: "get",
		data: "",
		success: function(result, textStatus) {
			alert("成功");
			console.log(result)
		},
		error: function(xhr, errorMessage, e) {
			alert("失败");
		}
	});
}

天气查询

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/WeatherQuery.css" type="text/css" />
		<script src="../js/jquery-3.6.3.js"></script>

	</head>
	<body>
		<div id="container">
			<div>
				请输入城市名称：
				<input type="text" id="city">
			</div>
			<ul id="show">
				<li>天气信息详情</li>
				<iframe width="280" height="300" frameborder="0" scrolling="no" hspace="0"
					src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1"></iframe>
			</ul>
		</div>
		<script src="../js/Weather.js"></script>
	</body>
</html>

css

* {
	margin: 0px;
	padding: 0px;
}

#container {
	background: #fff;
	font-size: 16px;
	width: 800px;
	margin: 50px auto;
	font-size: 22px;
}

input[id="city"] {
	width: 560px;
	height: 50px;
	font-size: 20px;
	color: #333;
	border: solid 2px #efefef;
	padding-left: 20px;
}

#show {
	list-style: none;
	border: solid 2px #ccc;
	width: 560px;
	margin: 50px auto;
	min-height: 200px;
	box-shadow: 5px 5px 5px #ccc;
	padding: 20px;
}

JavaScript

$(function() {
	// 获取数输入框
	var $kw = $("#keywords");
	// 当键盘上有按键 被抬起时触发 
	$kw.keyup(function() {
		// 获取输入框中的输入值
		var $value = $kw.val();
		// 调用函数，获取数据
		$.ajax({
			// 服务器地址： 百度公开提供的数据查询功能
			url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=?",
			type: "get",
			data: {
				wd: $value
			}, //将输入框的值 传递给 url
			dataType: "jsonp", // 跨域访问
			success: function(msg) { // 成功

				// 当url接口访问成功时，自动调用success对应的函数，
				// 接口返回的数据会自动存放在函数的参数data中
				console.log(msg.s);
				// 将输入输出到页面中：dom操作
				var _sug = msg.s;
				// 清空原来的ul标签
				$("#sug").empty();
				for (var i = 0; i < _sug.length; i++) {
					// 创建一个li标签
					var $li = $("<li>");
					// 标签中添加文本数据
					$li.text(_sug[i]);
					// 将li标签，添加到页面中
					$("#sug").append($li);
				}
			}
		});
	});
})

function start() {
	var $kw = $("#keywords");
	var $value = $kw.val();
	$.ajax({
		url: "",
		type: "get",
		data: "",
		success: function(result, textStatus) {
			alert("成功");
			console.log(result)
		},
		error: function(xhr, errorMessage, e) {
			alert("失败");
		}
	});
}