代码编织梦想

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("失败");
		}
	});
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_59138290/article/details/129630544

ajax案例_zhyue28的博客-爱代码爱编程_ajax案例

案例:为修改密码的页面中的提交按钮添加js代码。ajax的主要作用是当点击按钮时浏览器使用子线程发送请求,表现为整个页面不会刷新。 $("#btn-change-password").click(function() {

ajax实现加减,Ajax案例(使用ajax进行加法运算)-爱代码爱编程

此案例功能实现了一边看视频一边进行加法运算,而加法运算时页面不会刷新请求 ajax代码: $(function () { $("#btnOK").click(function () { var i1 = $("#i1").val(); var i2 = $("#i2").val(); var xhr = window.XMLHttpRequ

ajax发送请求案例,AJAX案例一:发送POST请求-爱代码爱编程

function createXMLHttpRequest() { try { return new XMLHttpRequest(); } catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP"); } catch (e) { try { return ActvieXObject

Ajax案例之聊天机器人-爱代码爱编程

在家是否感到空虚寂寞无聊呢🤔 别怕! 今天我就要带来一个带你消遣时光的陪聊! 她可以陪你谈天说地,你有什么需要她帮助的话她也会尽自己的能力来帮助你! 目录 案例效果 实现效果操作  Step1:案例中的代码结构 Step2:在js文件中实现动态效果 总结   案例效果 我们所想得到的效果: 当机器人和我们对话,

AJAX案例 - 图书管理-爱代码爱编程

1 渲染UI结构  2 案例用到的库和插件 用到的 css 库 bootstrap.css 用到的 javascript 库 jquery.js 用到的 vs code 插件 Bootstrap 3 Snippets  3 渲染图书列表(核心代码) function getBookList() { // 1. 发起 ajax 请求获

ajax:ajax发送post请求、ajax案例_dengfengling999的博客-爱代码爱编程

目录: (1)ajax发送Post请求 (2)ajax发送post请求模拟提交表单数据 (3)ajax案例验证用户名是否可用 (4)发送ajax请求动态展示学生列表案例   (1)ajax发送Post请求 <!DOCTYPE html> <html lang="en"> <head> &

$.ajax() 方法案例_追风少年?的博客-爱代码爱编程

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.5.1.j

$.ajax案例详细参数介绍_$.ajax 参数-爱代码爱编程

$.ajax({ type: 'post', //String 默认为GET timeout: '2000', //Number 设置超时时间(毫秒) url: {""}, //String 发送请求的地址 async: false,

js逆向爬取某音乐网站某歌手的歌曲_如何仅根据一个部分找到一首歌曲 cdsn-爱代码爱编程

js逆向爬取某音乐网站某歌手的歌曲 一、分析网站1、案例介绍2、寻找列表页Ajax入口(1)页面展示图。(2)寻找部分歌曲信息Ajax的token。(3)寻找歌曲链接(4)获取歌曲名称和id信息 3、寻