Ajax案例

Ajax案例

百度接口搜索关键词

Ajax案例_第1张图片

<!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.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("失败"); } }); }
  • 天气查询

    Ajax案例_第2张图片

    <!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.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("失败"); } }); }
  • 你可能感兴趣的:(ajax,javascript,前端)