jQuery之简易版周公解梦_jquery通过输入梦到的场景点击解梦获得回答-CSDN博客

本文链接：https://blog.csdn.net/weixin_42717219/article/details/84993931

使用方法:jQuery Ajax
1.利用jQuery中的Ajax对网上数据进行请求,拿到数据后,根据关键字输出对应的结果:

效果图如下:
在这里插入图片描述

代码如下:

<head>
	<meta charset="UTF-8">
	<title></title>
	<!--添加jQuery库-->
	<script type="text/javascript" src="js/jquery.min.js"></script> 
	<!--css样式表-->
	<style type="text/css">
		
		*{
			margin: 0;
			padding: 0;
			position: relative;
		}
		/*输入框*/
		input{
			position: absolute;
			left: 40%;
			bottom: 10px;
			border: 0;
			border-bottom: 1px solid gray;
			font-size: 30px;
			text-align: center;
			
		}
		/*按键*/
		button{
			position: absolute;
			left: 60%;
			bottom: 10px;
			padding:5px;
			border: 0;
			background-color: crimson;
			font-size: 30px;
			border-radius: 10px;
		}
		/*顶部盒子*/
		
		#div1{
			height: 200px;
			background-color: aliceblue;
			border-bottom: 1px solid darkgray;
		}
		/*底部盒子*/
		#div2{
			height: 500px;
			background-color: cadetblue;
		}
		#div2 div{
			position: absolute;
			top: 10px;
			left: 25%;
			font-size: 25px;
			width: 1000px;
		}
	</style>
	
	<!--js-->
	<script type="text/javascript">
		$(function(){
			var word1 = ''

			
			//button按钮按键使劲
			$('button').on('click',function(){
				//移出上次底部盒子的子标签
				$('#div2').children().remove()
				//为关键字赋值
				word1 = $('#input1').val()
				console.log(word1)
				//ajax网络请求数据
				$.get('http://api.tianapi.com/txapi/dream/',{'key':'772a81a51ae5c780251b1f98ea431b84','word':word1},function(re){
					var array1 = re.newslist[0]
					
					var divNode = $("<div></div>")
					divNode.text(array1.result)

					$('#div2').append(divNode)
					
					})
			})

		})
	</script>
</head>
<body>
	
	<div id="div1">
		<input type="text" name="" id="input1" value="" placeholder="周公解梦 解你所梦" />
		<button>查询</button>
	</div>
	<div id="div2">
		
	</div>

</body>